带有下一个的jQuery动画无限循环
Posted
技术标签:
【中文标题】带有下一个的jQuery动画无限循环【英文标题】:Jquery animation infinite loop with next 【发布时间】:2015-10-11 23:40:07 【问题描述】:我想将我的 html 页面的图片一张一张地制作成动画并无限循环。 我将下面的代码与下一个方法一起使用,但我找不到重新启动该功能的简单方法。如果我尝试从函数内部启动相同的函数,那将无法解决问题,因为我希望图片一个接一个地进行动画处理。如何从第一项开始使用 next 重新启动循环?
先谢谢了,这里是代码
function animationfade()
$('img').first().fadeIn(500).fadeOut(2000, function nextone()
$(this).next('img').fadeIn(500).fadeOut(2000,nextone);
);
animationfade();
;
animationfade();
【问题讨论】:
一个简单的方法是将刚刚隐藏的图像附加到末尾。所以总是有下一个,而不是创建全局变量并在每次迭代时检查它们。 【参考方案1】:您首先需要等到fadeOut
完成,然后再调用fadeIn
。根据您的 CSS,使用 opacity
选项可能会更好:
(function ()
var index = 0;
var $imgs = $('img');
var animationfade = function ()
$imgs.eq(index).animate(opacity: 0, 500, function ()
index = (index + 1) % $imgs.length;
$(this).animate(opacity: 1, 2000, animationfade);
);
;
animationfade();
)();
【讨论】:
以上是关于带有下一个的jQuery动画无限循环的主要内容,如果未能解决你的问题,请参考以下文章