我想要發生的是當我將游標懸停在影像上時，它將開始回圈影片。當我離開游標時，它會停止影片。它確實停止了，但是當我再次將其懸停在影像上時，回圈影片不再起作用。
$(".right-section img").mouseenter(function() {
var hoveredImage = $(this).attr("id");
function loop() {
$("#" hoveredImage).animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop();
});
}
loop();
$("#" hoveredImage).mouseleave(function() {
$(this).dequeue();
$(this).css({
bottom: ""
});
});
});
uj5u.com熱心網友回復：
要執行您需要呼叫stop()以清除影片佇列的操作img：
顯示代碼片段
$(".right-section img").mouseenter(function() {
function loop($img) {
$img.animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop($img);
});
}
loop($(this));
}).mouseleave(function() {
$(this).stop(true);
});.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>話雖如此，更好的方法是使用 CSS 制作影片。CSS 性能更好，也更符合關注點分離原則。嘗試這個：
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
.right-section img:hover {
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0% { bottom: 0; }
50% { bottom: 15px; }
100% { bottom: 0; }
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503788.html
標籤：javascript jQuery 动画