javascript–jQuery动画,链接,.each()和.animate()(或fadeIn()和fadeOut())

概述我今天试图解决这个问题时遇到了一些麻烦,我想在我的DOM中创建5个项目(在相同的属性元素下列出,$('.elements'))淡入淡出,之后阅读API我认为.each()将是一个很棒的想法,实现淡入和淡出展示画廊.但是,我目前正在使用：$('.elements').each(function() { $(this).fadeIn(2000).dela

我今天试图解决这个问题时遇到了一些麻烦,我想在我的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));

演示：http://jsfiddle.net/uWGVN/3/ 总结

以上是内存溢出为你收集整理的javascript – jQuery动画,链接,.each()和.animate()(或fadeIn()和fadeOut())全部内容，希望文章能够帮你解决javascript – jQuery动画,链接,.each()和.animate()(或fadeIn()和fadeOut())所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。