@raft88

Почему резко тормозит анимация JS?

Всем привет!

Я новичок в изучении JS. Для практики решил сверстать главную страницу сайта moyo.ua, там есть такой блок:
7b6041f17cf64a41824d2909d657cc5c.png

При наведении курсора происходит анимация (картинка немного поднимается вверх).

Вот что у меня получилось:

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-файле, но и в самой верстке?
  • Вопрос задан
  • 600 просмотров
Решения вопроса 1
igorperegudov
@igorperegudov
Frontend-developer
на сайте анимация (скорее всего) сделана на css
если хотите сделать на js вешайте класс - не будет тормозить
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы