javascript - 悬停动画

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

您可以使用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 2

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

Answer 3

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