懸停動畫

Question

如何讓hover()連續運行？當我將鼠標放在#up_btn上時，我想要的是，top屬性保持動畫效果。現在，它只運行一次。

$(document).ready(function(){ 
    $("#up_btn").hover(function(){ 
     var new_num = parseInt($("#move_box").css("top")); 
     $("#move_box").css("top", new_num + 1); 
    }) 
}) 

Answer 1

$(document).ready(function() { 
    $("#up_btn").mouseenter(function() { 
     var new_num = parseInt($("#move_box").css("top")); 
     $("#move_box").css("top", new_num + 1); 
    }) 
}) 

Answer 2

您可以使用setInterval，使你的代碼運行多次，然後用clearInterval停止動畫：

$(document).ready(function() { 
    var timer; 

    $("#up_btn").hover(function() { 
     timer = setInterval(function() { 
      $("#move_box").css('top', '+= 1'); 
     }, 100); // Change the interval as you see fit. 
    }, function() { 
     clearInterval(timer); 
    }); 
}); 

Answer 3

使用setInterval或setTimeout。例如：

var move_box_interval; 
$(document).ready(function() { 
    $("#up_btn").hover(function() { 
     // Change the interval to be appropriate. It's in milliseconds. 
     move_box_interval = setInterval(move_box, 100); 
    }); 

    // Change this to the appropriate trigger. 
    $("#up_btn").mouseout(function() { 
     clearInterval(move_box_interval); 
    }); 
}); 

function move_box() { 
    $("#move_box").css("top", "+= 1"); 
}