Question

简单的问题，如何运行这个jQuery反弹悬停在下面总是反弹。因此，我不需要将其悬停，每次都会反弹。

以下是代码：

$(document).ready(function(){
        $(".button").hover(function(){
            $(".button img")
            .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
            .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
            .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
        });
    });

Answer 1

您应该使用setInterval和计时器=动画的总时间延迟

setInterval(function(){
    $(".button img")
    .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
    .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
    .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
},600);

或递归函数

function bounce(){
    $(".button img")
        .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
        .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
        .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100,function(){
        bounce();
    }); 
}
bounce();

Answer 2

将退回代码放入函数中，并从上一个动画的回调中调用它，以便重新启动：

function bounce_img(img) {
    img.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
        .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
        .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100,  // last jump
                function() {bounce_img(img);}); // restart
}

$(document).ready() {
    $(".button img").each(function() {
        bounce_img($(this));
    });
});

Answer 3

这只会将2000更改为您想要的任何时间（动画完成后）。

var timer = setInterval(function(){
    $(".button img")
    .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
    .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
    .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
}, 2000);

然后如果你想让它停止只是打电话

clearInterval(timer);

每次运行jQuery函数（如果是跳出效果）

3 个答案: