JQuery随着循环和延迟而淡出

我有2个Divs堆叠在一起。

我需要一个非常简单的function：

a）等待3秒然后b）FadeOut顶部Div显示第二个Div c）再次等待3秒然后d）再次淡入顶部Div e）再次循环

有人可以提供任何建议吗？

非常感谢

Answer 1

如果两个div的id为“id1”和“id2”，而id2是上一个，则代码如下：

 function fadeIn() { $("id2").animate({opacity:0},500); setTimeout(fadeOut,3500); } function fadeOut() { $("id2").animate({opacity:1},500); setTimeout(fadeIn,3500); } function startAnim() { setTimeout(fadeIn,3000); } 

startAnim（）启动动画循环，你应该调用@ start。 然后fadeIn＆Out保持动画id2并为彼此设置超时。 延迟为3500，因为您需要3秒的延迟（即3000毫秒），并且需要500秒才能完成上一个动画。 这可以使用animate上的回调来完成，但这更麻烦。

Answer 2

这就是你要找的东西（我想）。 它使用一个无序列表，但你可以将它切换为div，或者只是将你的div放在列表项中，就像我在下面所做的那样。

这是jQuery ……

 $(document).ready(function() { var j = 0; var delay = 2000; //millisecond delay between cycles function cycleThru(){ var jmax = $("ul#cyclelist li").length -1; $("ul#cyclelist li:eq(" + j + ")") .animate({"opacity" : "1"} ,400) .animate({"opacity" : "1"}, delay) .animate({"opacity" : "0"}, 400, function(){ (j == jmax) ? j=0 : j++; cycleThru(); }); }; cycleThru(); }); 

……还有一些起始的css ……

 ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px} ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute} 

你已经有了HTML，但是如果你需要一个例子……

 
 
First Div
 
Second Div
 
Third Div
  

我很乐意为此而感到荣幸，但它直接来自CSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/

Answer 3

没有人会看到这个，但以防万一……

这是没有循环它虽然….

那就是

Answer 4

此尝试使用来自jquery.com的小菜谱function等待。

函数doFading假定顶部div的id为“a4​​”。

 function doFading() { $("#a4").wait(3000) .fadeOut("slow") .wait(3000) .fadeIn("slow",doFading); } $.fn.wait = function(time, type) { time = time || 1000; type = type || "fx"; return this.queue(type, function() { var self = this; setTimeout(function() { $(self).dequeue(); }, time); }); }; 

Answer 5

如果你也想拥有它xfade。 使用floyed的脚本，但进行我使用过的更改。 唯一的问题是你想要显示的第一个图像应该是li元素中的第二个

 $(document).ready(function() { var j = 0; var delay = 5000; //millisecond delay between cycles function cycleThru(){ var jmax = $("ul#cyclelist li").length -1; $("ul#cyclelist li:eq(" + j + ")") .animate({"opacity" : "1"} ,1000) .animate({"opacity" : "1"}, delay); $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000); $("ul#cyclelist li:eq(" + j + ")") .animate({"opacity" : "0"}, 1000, function(){ (j == jmax) ? j=0 : j--; cycleThru(); }); }; cycleThru(); }); 

Answer 6

我知道这已经过时了，但我想我会分享我为实现这一目标所做的一切

 $(document).ready(function() { var delay = 500; $("#mydiv").bind('fadein', function() { $(this).fadeOut(1000, function() { $(this).delay(delay).trigger('fadeout'); }); }); $("#mydiv").bind('fadeout', function() { $(this).fadeIn(1000, function() { $(this).delay(delay).trigger('fadein'); }); }); $("#mydiv").fadeIn(1000, function() { $(this).trigger("fadein"); }); }); 

然后在你希望它停止时调用它

 $("#mydiv").stop().hide();