Jquery 下一个动画无限循环
Jquery animation infinite loop with next
我想一张一张地为我的 html 页的图片制作动画,并无限循环播放。
我将下面的代码与 next 方法一起使用,但找不到重新启动该功能的简单方法。如果我尝试从函数内部启动相同的函数,但该函数不起作用,因为我希望图片一张接一张地制作动画。如何从第一项开始使用下一项重新开始循环?
在此先感谢,这是代码
function animationfade() {
$('img').first().fadeIn(500).fadeOut(2000, function nextone() {
$(this).next('img').fadeIn(500).fadeOut(2000,nextone);
});
animationfade();
};
animationfade();
您首先需要等到 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();
})();
我想一张一张地为我的 html 页的图片制作动画,并无限循环播放。 我将下面的代码与 next 方法一起使用,但找不到重新启动该功能的简单方法。如果我尝试从函数内部启动相同的函数,但该函数不起作用,因为我希望图片一张接一张地制作动画。如何从第一项开始使用下一项重新开始循环?
在此先感谢,这是代码
function animationfade() {
$('img').first().fadeIn(500).fadeOut(2000, function nextone() {
$(this).next('img').fadeIn(500).fadeOut(2000,nextone);
});
animationfade();
};
animationfade();
您首先需要等到 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();
})();