让jQuery动画函数无限循环

Getting a jQuery animate function to loop indefinitely?

本文关键字：无限循环 函数 动画 jQuery      更新时间：2023-09-26

可能重复：
如何无限期循环此动画？

有人能告诉我如何让这个脚本重复或循环吗(就像不结束动画功能并永远持续下去一样(。

我是javascript的新手，所以如果有人能向我展示我能做些什么来实现这一点，我将不胜感激。

谢谢。

$(document).ready(function() {
    var rageImg = $('.foo');
    $(rageImg).animate({top:'+=100px'}, 1000).animate({top:'-=100px'}, 1000);
});

$(function loop() {
    $('.foo').animate({ top: '+=100px' }, 1000, function() {
        $(this).animate({ top: '-=100px' }, 1000, loop);
    });
});

演示：http://jsfiddle.net/VC3S6/

仅限CSS：

.foo {
  animation:sway 1s infinite alternate;
  position:relative;
}
@keyframes sway {
  from {top:0px}
  to {top:100px}
}

添加-webkit前缀(-webkit-animation、@-webkit-keyframes(以支持Chrome。

适用于IE10、Firefox 16(为Firefox 5至15添加-moz-前缀(和Chrome 4。

因为这很可能是美学，所以没有人支持也没什么大不了的

jQuery答案：

$(function() {
  $('.foo').animate({top:'+=100px'},1000)
                   .animate({top:'-=100px'},1000,arguments.callee);
});

function loop() {
    $(rageImg).animate({top:'+=100px'}, 1000).animate({top:'-=100px'}, loop);
}
$(document).ready(function() {
    loop();
});

演示：http://jsfiddle.net/JD9hN/

相关文章：