jQuery 在一个循环中交叉淡化两个图像！答案

【问题标题】：jQuery cross fading two images on a loop!jQuery 在一个循环中交叉淡化两个图像！
【发布时间】：2010-11-26 01:28:35
【问题描述】：

我无法弄清楚如何让一个简单的淡入淡出循环工作。我对 jQuery 很陌生，你可能会说。我已经尝试过了，但现在需要很长时间才能完成，所以我想我会寻求帮助。

我想做什么：

我有两个图像，id 的 #img1 和 #img2。我希望图像 1 淡入然后等待让我们说 6 秒然后淡出。我已经尝试过 .wait 功能，但它只是停止了我的工作。我设法让第一张图像淡入然后淡出，但中间没有等待。然后我想在图像 1 淡出时开始淡入图像 2，然后图像 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您可以尝试对您的答案进行一些解释。谢谢

【问题讨论】：

标签： jquery image loops fade

【解决方案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/

【讨论】：

【解决方案2】：

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

它有比你想做的更多的选择。

如果您确实需要自己执行此操作，可以查看插件的源代码。我没有这样做，但我认为编码器使用了 animate 函数（来自 jQuery）和 setTimeout 函数（来自纯 javascript）的组合。使用这些函数，他必须做一些事情，比如启用一个计时器一段时间，当时间完成时，他执行动画函数，将图像的不透明度设置为 0（用于图像隐藏）和 1（用于显示图像）。

【讨论】：

因为我必须被一个准雇员要求这样做，我需要坚持他们要求我这样做的方式。这是我必须做的最后一个任务，我需要一个手，没有 jQuery 经验。不过谢谢你的指点。

【解决方案3】：

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

【讨论】：

我似乎遇到了这个跨浏览器的“堆栈”问题，例如，我在几个循环后得到了这个“堆栈空间不足”，一些浏览器在出现此错误之前的持续时间比其他浏览器长过来。不知道该怎么办...

【解决方案4】：

您可以结合使用 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

【讨论】：

Kobi 如果我们的代码中有 2 个图像（项目），我们应该怎么做？

【解决方案5】：

基于 delay() 函数，这里是图像数量的解决方案，如果需要更大数量的图像循环。这给出了 B->A 交叉淡入淡出效果（或删除 +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<imgnum; i++){
        // remove +fadems/2 for fadeOut effect, instead of crossfade
        $("#img"+i).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems+fadems/2); 
        nms = nms + fadems*2 + dms - fadems/2;  
    }
    // fadeInOut last image and start over
        $("#img"+imgnum).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems, startSlideshow);
}

startSlideshow();

HTML: 注意：下一张图片 id 由 ++ 升高：#img1、#img2、#img3....#img128 等。

<style>
    .crossfade {
        /* image width and height */
        width: 160px;
        height: 120px;
        display: none; 
        position: absolute !important;

    }
</style>

<div class="place_your_images_container_where_is_needed">

    <div id="img1" class = "crossfade" >
        <img src="imageOne.png" />
    </div>

    <div id="img2" class = "crossfade" >
        <img src="image2.png" />
    </div>

    <div id="img3" class = "crossfade" >
        <img src="image3.png" />
    </div>

    <div id="img4" class = "crossfade" >
        <img src="imageFour.png" />
    </div>

    <div id="img5" class = "crossfade" >
        <img src="imageLast.png" />
    </div>

</div>

附言使用透明的PNG图片效果更好。

【讨论】：

【解决方案6】：

这就是我使用简单 jQuery 的方式。查看工作 sn-p。

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();
    });
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" src="http://lorempixel.com/city/200/200">
<img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">

【讨论】：