Как убрать мигание в блоке?
при наведении есть мигание врапперу меняется background
изначально ему задан liner-gradient а когда наводим на итемы - просто background
$(document).ready(function() {
let image = $('.panel__item');
let title = $('.panel__title');
let defaultTitle = $('.panel__title').data('default');
let defaultDesc = $('.panel__text p').data('default');
let wrap = $('.panel');
let desc = $('.panel__text p');
image.on('mouseover', function() {
let currentColor = $(this).data("color");
let currentTitle = $(this).data("title");
let currentDesc = $(this).data("text");
wrap.css("background", currentColor);
title.text(currentTitle);
desc.text(currentDesc);
image.addClass('panel__disabled');
$(this).addClass('panel__active');
})
image.on('mouseout', function() {
image.removeClass('panel__disabled');
image.removeClass('panel__active');
title.text(defaultTitle);
desc.text(defaultDesc);
wrap.attr('style', '')
})
});
.panel {
background: linear-gradient(180deg, #004386 0%, #0065CA 100%);
padding-top: 45px;
margin-bottom: 16px;
transition: 0.4s background;
}
.panel__title {
font-size: 2.9375rem;
line-height: 1;
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 17px;
font-weight: normal;
}
.panel__text {
min-height: 42px;
max-width: 760px;
margin: 0 auto;
margin-bottom: 70px;
}
.panel__text p {
font-size: 1.125rem;
line-height: 1.17;
color: #fff;
text-align: center;
}
.panel__wrap {
display: flex;
justify-content: center;
}
.panel__item {
display: flex;
flex-direction: column;
width: calc(100% / 5);
margin-bottom: 28px;
}
.panel__item:hover .panel__link {
opacity: 1;
visibility: visible;
}
.panel__image {
padding: 0 10px;
margin-bottom: 4px;
}
.panel__image img {
display: block;
margin: 0 auto;
transition: 0.4s opacity;
}
.panel__disabled {
opacity: 0.25;
}
.panel__active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="panel" style="">
<div class="container container--panel">
<h3 class="panel__title" data-default="title main">title main</h3>
<div class="panel__text">
<p data-default="lorem">lorem</p>
</div>
<div class="panel__wrap">
<a href="" class="panel__item" data-color="#03a4c7" data-title="Заголовок продукта 1" data-text="Текст про продукт 1">
<picture class="panel__image">
<source srcset="img/panel/prod1_1x.png 1x, img/panel/prod1_2x.png 2x">
<img src="img/panel/prod1_1x.png" alt="panel_1">
</picture>
</a>
<a href="" class="panel__item" data-color="#f2a900" data-title="Заголовок продукта 2" data-text="Текст про продукт 2">
<picture class="panel__image">
<source srcset="img/panel/prod2_1x.png 1x, img/panel/prod2_2x.png 2x">
<img src="img/panel/prod2_1x.png" alt="panel_2">
</picture>
</a>
<a href="" class="panel__item" data-color="#003087" data-title="Заголовок продукта 3" data-text="Текст про продукт 3">
<picture class="panel__image">
<source srcset="img/panel/prod3_1x.png 1x, img/panel/prod3_2x.png 2x">
<img src="img/panel/prod3_1x.png" alt="panel_3">
</picture>
</a>
<a href="" class="panel__item" data-color="#4f0641" data-title="Заголовок продукта 4" data-text="Текст про продукт 4">
<picture class="panel__image">
<source srcset="img/panel/prod4_1x.png 1x, img/panel/prod4_2x.png 2x">
<img src="img/panel/prod4_1x.png" alt="panel_4">
</picture>
</a>
<a href="" class="panel__item" data-color="#8db926" data-title="Заголовок продукта 5" data-text="Текст про продукт 5">
<picture class="panel__image">
<source srcset="img/panel/prod5_1x.png 1x, img/panel/prod5_2x.png 2x">
<img src="img/panel/prod5_1x.png" alt="panel_5">
</picture>
</a>
</div>
</div>
</section>
Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
У Вас в фоне присутствует градиент, у которого (пока) допускается анимация только позиции и размера, но не цветов. Поэтому не трогаем фон, а заливку делаем с помощью внутренней тени:
$(document).ready(function() {
let image = $('.panel__item');
let title = $('.panel__title');
let defaultTitle = $('.panel__title').data('default');
let defaultDesc = $('.panel__text p').data('default');
let wrap = $('.panel');
let desc = $('.panel__text p');
image.on('mouseover', function() {
let currentColor = $(this).data("color");
let currentTitle = $(this).data("title");
let currentDesc = $(this).data("text");
wrap.css("box-shadow", `inset 0 0 0 100vw ${currentColor}`);
title.text(currentTitle);
desc.text(currentDesc);
image.addClass('panel__disabled');
$(this).addClass('panel__active');
})
image.on('mouseout', function() {
image.removeClass('panel__disabled panel__active');
title.text(defaultTitle);
desc.text(defaultDesc);
wrap.attr('style', '')
})
});
.panel {
background: linear-gradient(180deg, #004386 0%, #0065CA 100%);
padding-top: 45px;
margin-bottom: 16px;
transition: 0.4s box-shadow;
box-shadow: inset 0 0 0 100vw #0000;
}
.panel__title {
font-size: 2.9375rem;
line-height: 1;
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 17px;
font-weight: normal;
}
.panel__text {
min-height: 42px;
max-width: 760px;
margin: 0 auto;
margin-bottom: 70px;
}
.panel__text p {
font-size: 1.125rem;
line-height: 1.17;
color: #fff;
text-align: center;
}
.panel__wrap {
display: flex;
justify-content: center;
}
.panel__item {
display: flex;
flex-direction: column;
width: calc(100% / 5);
margin-bottom: 28px;
}
.panel__item:hover .panel__link {
opacity: 1;
visibility: visible;
}
.panel__image {
padding: 0 10px;
margin-bottom: 4px;
}
.panel__image img {
display: block;
margin: 0 auto;
transition: 0.4s opacity;
}
.panel__disabled {
opacity: 0.25;
}
.panel__active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="panel" style="">
<div class="container container--panel">
<h3 class="panel__title" data-default="title main">title main</h3>
<div class="panel__text">
<p data-default="lorem">lorem</p>
</div>
<div class="panel__wrap">
<a href="" class="panel__item" data-color="#03a4c7" data-title="Заголовок продукта 1" data-text="Текст про продукт 1">
<picture class="panel__image">
<source srcset="img/panel/prod1_1x.png 1x, img/panel/prod1_2x.png 2x">
<img src="img/panel/prod1_1x.png" alt="panel_1">
</picture>
</a>
<a href="" class="panel__item" data-color="#f2a900" data-title="Заголовок продукта 2" data-text="Текст про продукт 2">
<picture class="panel__image">
<source srcset="img/panel/prod2_1x.png 1x, img/panel/prod2_2x.png 2x">
<img src="img/panel/prod2_1x.png" alt="panel_2">
</picture>
</a>
<a href="" class="panel__item" data-color="#003087" data-title="Заголовок продукта 3" data-text="Текст про продукт 3">
<picture class="panel__image">
<source srcset="img/panel/prod3_1x.png 1x, img/panel/prod3_2x.png 2x">
<img src="img/panel/prod3_1x.png" alt="panel_3">
</picture>
</a>
<a href="" class="panel__item" data-color="#4f0641" data-title="Заголовок продукта 4" data-text="Текст про продукт 4">
<picture class="panel__image">
<source srcset="img/panel/prod4_1x.png 1x, img/panel/prod4_2x.png 2x">
<img src="img/panel/prod4_1x.png" alt="panel_4">
</picture>
</a>
<a href="" class="panel__item" data-color="#8db926" data-title="Заголовок продукта 5" data-text="Текст про продукт 5">
<picture class="panel__image">
<source srcset="img/panel/prod5_1x.png 1x, img/panel/prod5_2x.png 2x">
<img src="img/panel/prod5_1x.png" alt="panel_5">
</picture>
</a>
</div>
</div>
</section>