jQuery在循环中交叉淡化两个图像！
我无法弄清楚如何在淡出循环中使用简单的淡入淡出工作。 你可以告诉我，我对jQuery很新。 我已经有了它，但现在花了太长时间才能解决，所以我想我会寻求一些帮助。
我想做的事：
我有两张图片，id是＃img1和＃img2。 我想图像1淡入然后等待让我们说6秒然后淡出。 我已经尝试了.wait函数，但它只是停止了我工作的那一点。 我设法让第一张图像淡入淡出，然后却没有等待。 然后我想开始淡入图像2而图像1淡出然后图像2等待然后淡出而图像1再次淡入并永远循环！ 希望有道理。
$(document).ready(function(){ $('#img1').hide() .load(function () { $(this).fadeIn(4500) .fadeOut(4500); $('#img2').hide().wait(9000) .load(function () { $(this).fadeIn(4500) .fadeOut(4500); }); 干杯，它让我疯狂。 Ps你可以尝试给你答案中的一些解释。 谢谢
2年后编辑：有更好的方法来做到这一点……所以忽略这个答案。
我会尝试回调和setTimeout的组合。 （我打算以Kobi的回答为基础，因为他在打字时发布了。）
在CSS中，给两个图像一个“display：none;” 而不是在jQuery开始时将它们设置为隐藏。 然后在jQuery中：
function imageOneFade(){ $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); }); } function imageTwoFade(){ $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); }); } $(document).ready(function(){ imageOneFade(); });
希望你工作的东西。
setTimeout函数有两个参数。
setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)
并且fadeIn / Out函数可以具有第二个参数，该参数将在效果结束时触发。
这是一个四图像循环幻灯片，不使用setTimeout函数，而是使用延迟函数。
在行动中看到它http://www.erestaurantwebsites.com/
为什么不使用像Cycle插件这样的解决方案？
它有比你想做的更多的选择。
如果你真的需要自己做，你可以看一下插件的源代码。 我没有这样做，但我认为编码器使用animate函数（来自jQuery）和setTimeout函数（来自纯javascript）的组合。 使用这些function，他必须做一些事情，比如在一段时间内启用计时器，当时间完成后，他执行动画function，将图像的不透明度设置为0（对于图像隐藏）和1（对于图像显示）。
您可以结合使用jQuery的回调和JavaScript setTimeout 。
setTimeout用于延迟，并且在动画完成后使用回调（尽管还有许多其他回调）。
function startSlideshow(){ $('#p1').fadeOut(2000, function(){ setTimeout(function(){ $('#p1').fadeIn(2000, startSlideshow) },1000); }); } $(document).ready(function(){ startSlideshow(); });
请参阅以下内容： http ： //jsbin.com/ulugo
基于delay（）函数，如果需要更大数量的图像循环，这里是图像数量的解决方案。 这给出了B-> A交叉渐变效果（或者为简单的fadeOutIn效果移除了+ fadems / 2 ）。 心灵 – 图像必须在位：绝对！重要; （参见html示例）。
jQuery的：
function startSlideshow(){ var dms = 2500; // image show duration in ms var fadems = 750; // crossfade in ms var imgnum = 5; // total number of images var nms = 0; // fadeInOut first image $("#img1").fadeIn(fadems).delay(dms).fadeOut(fadems); nms = nms + fadems*2 + dms- fadems/2; // fadeInOut rest images for (var i = 2; i
HTML：注意：下一个图像ID由++提升：＃img1，＃img2，＃img3 ....＃img128等。
ps使用透明的PNG图像以获得更好的效果。
这就是我用简单的jQuery做的方法。 请参阅工作代码段。
loopStart(); function loopStart() { $("#image1").delay(2000).fadeOut("slow", function() { loopTwo(); }); }; function loopOne() { $("#image1").fadeIn("slow", function() { $("#image1").delay(2000).fadeOut("slow", function() { loopTwo(); }); }); }; function loopTwo() { $("#image2").fadeIn("slow", function() { $("#image2").delay(2000).fadeOut("slow", function() { loopOne(); }); }); };
