JQuery анимация влево на зависании не работает отлично

Question

Я создал скрипт, который перемещает li влево на 40 пикселей на центр мыши и перемещает его обратно на мышь. Он отлично работает в большинстве случаев, однако он часто сбой так, что он перемещается влево и не записывает mouseleave, поэтому он останется на 40 пикселей влево. Затем, когда вы снова нажмете мыши, он переместит еще 40 пикселей. Это заканчивается несогласованным списком.

перекос список изображений -

Вот HTML и JQuery:

$(document).ready(function(){ 
 
    $(".work ul li a").on("mouseenter", function() { 
 
    $(this).animate({ 
 
     left: "-=40px", 
 
    }, 200) 
 
    }); 
 
    $(".work ul li a").on("mouseleave", function() { 
 
    $(this).animate({ 
 
     left: "+=40px", 
 
    }, 200) 
 
    }); 
 
    $("#darl").on({ 
 
    mouseenter: function() { 
 
     $("#bgimg1").fadeIn(200); 
 
    }, 
 
    mouseleave: function() { 
 
     $("#bgimg1").fadeOut(200); 
 
    } 
 
    }); 
 
    $("#chil").on({ 
 
    mouseenter: function() { 
 
     $("#bgimg2").fadeIn(200); 
 
    }, 
 
    mouseleave: function() { 
 
     $("#bgimg2").fadeOut(200); 
 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="work"> 
 
    <h1 class="heading">Selected Projects</h1> 
 
    <div class="line"></div> 
 
    <ul> 
 
    <li id="darl"> 
 
     <div class="container2"><div class="block"> 
 
     <img class="bg-image" id="bgimg1" src="Images/perspective2final2pfolio2.jpg"> 
 
     </div></div> 
 
     <a href="">1. Darlington Terrace</a> 
 
    </li> 
 

 
    <li><div class="thinline"></div></li> 
 
    <li id="chil"> 
 
     <div class="container2"><div class="block"> 
 
     <img class="bg-image" id="bgimg2" src="Images/DSC_0756.jpg"> 
 
     </div></div> 
 
     <a href="">2. Children's Playground</a> 
 
    </li> 
 

 
    <li><div class="thinline"></div></li> 
 
    <li> 
 
     <div class="container2"><div class="block"> 
 
     <img class="bg-image" id="bgimg3"src="Images/perspective2final2pfolio2.jpg"> 
 
     </div></div> 
 
     <a href="">3. Lawn Bowl Bakery Bridge</a> 
 
    </li> 
 

 
    <li><div class="thinline"></div></li> 
 
    <li> 
 
     <div class="container2"><div class="block"> 
 
     <img class="bg-image" id="bgimg4"src="Images/perspective2final2pfolio2.jpg"> 
 
     </div></div> 
 
     <a href="">4. Aqueduct: Museum of Architecture</a> 
 
    </li> 
 

 
    <li><div class="thinline"></div></li> 
 
    <li> 
 
     <div class="container2"><div class="block"> 
 
     <img class="bg-image" id="bgimg5"src="Images/perspective2final2pfolio2.jpg"> 
 
     </div></div> 
 
     <a href="">5. Velocity Frequent Flyer Website</a> 
 
    </li> 
 

 
    <li><div class="thinline"></div></li> 
 
    </ul> 
 

 
</div>

Вот GitHub репо: https://github.com/mingweichan/CVwebsite

Answer 1

Я столкнулся с этим некоторое время назад, вы захотите добавить .stop() перед вызовом .animate, потому что мне кажется, что jQuery регистрирует каждое событие и помещает их в стек и выполняет итерацию через каждый элемент в стеке.

Другими словами, если вы быстро и быстро перемещаете указатель мыши и выходите из этого элемента, события срабатывают 10 раз.

Однако для вашего случая добавьте .stop(), чтобы исправить одну проблему, но поскольку вы используете значения родственников для анимации свойства left, похоже, что он не завершил анимацию до того, как будет запущено следующее событие. Я предлагаю использовать абсолютные значения:

$(".work ul li a").on("mouseenter", function() { 
    $(this).stop().animate({ 
     left: "-40px", 
    }, 200) 
}); 
$(".work ul li a").on("mouseleave", function() { 
    $(this).stop().animate({ 
     left: "0px", 
    }, 200) 
}); 

Answer 2

Так, основываясь на другие полезные ответы, вот то, что работает для меня:

$(".work ul li a").on("mouseenter", function() { 
    $(this).finish().animate({ 
     marginLeft: "-40px", 
    }, 200) 
}); 
$(".work ul li a").on("mouseleave", function() { 
    $(this).finish().animate({ 
     marginLeft: "0px", 
    }, 200) 
}); 

Вместо «слева» Я использовал MarginLeft так, что она будет по-прежнему работать в отзывчивый макет. И я использовал финиш(), чтобы убедиться, что это остановит анимацию сразу, а не будет очередью анимации несколько раз. Спасибо за всю помощь, ребята!