Анимация при зависании

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"); 
}