我今天试图解决这个问题时遇到了一些麻烦,我想在我的DOM中创建5个项目(在相同的属性元素下列出,$(‘.elements’))淡入淡出,之后阅读API我认为.each()将是一个很棒的想法,实现淡入和淡出展示画廊.
但是,我目前正在使用：
$('.elements').each(function() {
$(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})
但是一切都会立刻消失.
我如何进行连续效果,其中所有内容都链接在一起,它从列表中的第一项开始(a.k.a – $(‘elements’).eq(0)？)直到最后一项,然后再次重新启动？
我真的需要一个while循环来在javascript / jquery中执行此操作吗？我希望有一个类似的功能,我可以链接jQuery执行,以减少负载和文件大小.
另外,有没有办法限制图像溢出我的div？
最佳答案
(function loop() {
$('.elements').each(function() {
var $self = $(this);
$self.parent().queue(function (n) {
$self.fadeIn(2000).delay(200).fadeOut(2000,n);
});
}).parent().promise().done(loop);
}());
演示：http://jsfiddle.net/uWGVN/2/
更新以使其无限循环.
第二次更新：一种不同的,可能更具可读性的方法：
(function fade(idx) {
var $elements = $('.elements');
$elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000,function () {
fade(idx + 1 < $elements.length ? idx + 1 : 0);
});
}(0));
