Всем привет!
Я новичок в изучении JS. Для практики решил сверстать главную страницу сайта moyo.ua, там есть такой блок:
При наведении курсора происходит анимация (картинка немного поднимается вверх).
Вот что у меня получилось:
HTML:
<section class="block_2">
<div class="benefits consult">
<img src="img/head.png">
<p>Ваш личный консультант</p>
<p>Поможет решить любую сложность</p>
</div>
<div class="benefits support">
<img src="img/clock.png">
<p>Техподдержка 24/7</p>
<p>Мы на связи, когда вам удобно</p>
</div>
<div class="benefits deliver">
<img src="img/plane.png">
<p>Быстрая доставка</p>
<p>Служба доставки MOYO работает по всей Украине</p>
</div>
</section>
CSS:
.block_2 {
padding: 0 10px;
font-size: 0;
}
.block_2 div {
display: inline-block;
width: 330px;
font-size: 15px;
margin: 0 25px 0 0;
padding: 0 25px 0 65px;
vertical-align: top;
box-sizing: border-box;
}
.block_2 div:last-of-type { margin: 0; }
.block_2 img { float: left; padding: 50px 0 0 0; }
.block_2 p { margin: 0 0 0 110px; }
.block_2 > div p:first-of-type {
font-size: 17px;
padding: 50px 0 10px 0;
}
.block_2 > div p:last-of-type {
font-size: 13px;
color: #D8D8D8;
padding: 0 0 10px 0;
}
JS:
block_2.addEventListener("mouseover", function(e){
var target = null, img;
if(e.target.closest(".benefits")) {
target = e.target.closest(".benefits");
img = $(target.firstElementChild);
}
if(target && !isInside(e.relatedTarget, target)){
img.animate({ "padding-top": "20px", "padding-bottom": "30px" }, 200);
}
block_2.addEventListener("mouseout", function(e){
if(target && !isInside(e.relatedTarget, target)){
img.animate({ "padding-top": "50px", "padding-bottom": "0px" }, 200);
}
});
});
function isInside(node, target) {
for (; node != null; node = node.parentNode)
if (node == target) return true;
}
У меня код, вроде, и работает, но стоит быстро поводить мышкой над блоками с анимацией, так сразу начинаются жуткие тормоза с анимацией. И даже когда анимация через несколько десяткой секунд вся выполнится, то простое разовое наведение на блок вызывает эффект анимации только секунд через 20-30. В то же время на сайте можно как угодно быстро водить мышкой и все работает четко.
Что не так в моем коде? Если можно, какие грубые ошибки допущены не только в JS-файле, но и в самой верстке?
