jquery動畫左側懸停不能正常工作

Question

我已經創建了一個腳本，將li移動到mouseenter的左側40px並將其移回到mouseleave。它在大多數情況下都能正常工作，但它會經常出現故障，因此它會向左移動並且不會記錄mouseleave，因此它將保持向左移40px。然後當你再次滑鼠時，它會移動40px。這最後是一個錯位的列表。

錯位列表圖片 -

下面是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

我之前遇到過這種情況，在調用.animate之前，您會想要添加.stop()，因爲在我看來，jQuery註冊每個事件並將它們放入堆棧並遍歷堆棧中的每個項目。

換句話說，如果您快速移動鼠標10次以上，則事件將會激發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，以便它仍然工作在「左」一個響應式佈局。我用finish（）來確保它會立即停止動畫，而不是多次排隊動畫。感謝所有幫助傢伙！