jQuery在循环中交叉淡化两个图像!

Question

我无法弄清楚如何在淡出循环中使用简单的淡入淡出工作.你可以告诉我,我对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你可以尝试给你答案中的一些解释.谢谢

Answer 1

这是一个四图像循环幻灯片,不使用setTimeout函数,而是使用延迟函数.

<script>
  function startSlideshow(){
    $("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000
    $("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000
    $("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000
    $("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000
  }

  $(document).ready(function(){
    startSlideshow();
  });
</script>

在行动中看到它http://www.erestaurantwebsites.com/

Answer 2

为什么不使用像Cycle插件这样的解决方案？

它有很多选项,而不是你想做的.

如果你真的需要自己做,你可以看一下插件的源代码.我没有这样做,但我认为编码器使用animate函数(来自jQuery)和setTimeout函数(来自纯javascript)的组合.使用这些功能,他必须做一些事情,比如在一段时间内启用计时器,当时间完成后,他执行动画功能,将图像的不透明度设置为0(对于图像隐藏)和1(对于图像显示).

Answer 3

两年多后编辑：有更好的方法可以做到这一点......所以忽略这个答案。

我会尝试回调和 setTimeout 的组合。（我将以科比的回应为基础，因为他是在我打字时发帖的。）

在 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 函数可以有第二个参数，该参数将在效果完成时触发。