2

最终，我试图创建一个定时幻灯片放映，使图像淡入淡出。我无法弄清楚为什么我的 $.each 函数确实完成了数组每个索引的循环，而是只循环最后一个图像七次。

这是我的代码...

<script>
$(document).ready(function(){
    var image1 = "<img width='600' height='400' src='images/image1.jpg' />";
    var image2 = "<img width='600' height='400' src='images/image2.jpg' />";
    var image3 = "<img width='600' height='400' src='images/image3.jpg' />";
    var image4 = "<img width='600' height='400' src='images/image4.jpg' />";
    var image5 = "<img width='600' height='400' src='images/image5.jpg' />";
    var image6 = "<img width='600' height='400' src='images/image6.jpg' />";
    var image7 = "<img width='600' height='400' src='images/image7.jpg' />";
    var image8 = "<img width='600' height='400' src='images/image8.jpg' />";

    var imageArray = new Array(image1, image2, image3, image4, image5, image6, image7, image8);
    $.each(imageArray, function(key, value){
        $('#slide').html(value);
        $('#slide').hide().fadeIn('slow').fadeOut('slow');
    });
});
</script>

同样，最终发生的是最后一张图像在消失之前淡入淡出 7 次。提前谢谢各位。

4

6 回答 6

2

那是因为您的循环不会等待动画完成。它将所有动画命令一个接一个地保留在队列中。所以最好给一个回调来检查动画何时完成，然后更改图像（通过继续循环）。
否则你必须像 Thilo 建议的那样做

于 2012-06-18T09:55:34.347 回答
2

fadeIn我认为您的问题是 JavaScript 执行在执行他们的操作时不会暂停fadeOut。

你的 each电话是这样做的：

  1. 将 的 HTML 设置#slide为image1。
  2. 隐藏#slide。
  3. 开始淡入#slide。
  4. 立即将 HTML 设置#slide为image2（因为它不等待fadeIn完成），覆盖image1.
  5. 再次开始淡入#slide。

等等。

为了得到你想要的结果，你需要一个递归函数（即一个调用自身的函数）而不是你的each调用。该函数需要将回调函数传递给 and——fadeIn这些fadeOut函数将在执行完毕fadeIn时被调用。fadeOut

例如

function fadeImagesInAndOut(imageArray, imageIndex) {
    $('#slide').html( imageArray(imageIndex) );

    $('#slide').hide().fadeIn('slow', function () {

        $('#slide').fadeOut('slow', function () {

            if (imageIndex < imageArray.length) {
                fadeImagesInAndOut(imageArray, imageIndex + 1);
            }
        });
    });
}

fadeImagesInAndOut(imageArray, 0);
于 2012-06-18T10:03:55.070 回答
1

事情是动画是异步执行的。在您的代码中执行命令的顺序是：

  1. 设置$('#slide').html为第一张图片。
  2. 让 jQuery 启动对象的动画。动画尚未开始。
  3. 设置$('#slide').html为第二张图像。
  4. 要求另一个动画。
  5. ...
  6. 最后求动画。
  7. 你的功能已经完成。浏览器开始重绘页面并触发超时事件。您的容器是隐藏的，它的 html 是指最后一个图像。
  8. jQuery 为您的容器设置动画。

只有在动画结束后，您才需要更改容器的 html。这是一个例子：

$(document).ready(function(){
  //populate imageArray 
  function animate_one(index) {
    if (index >= imageArray.length) return;
    $('#slide').html(imageArray[index]);
    $('#slide').hide().fadeIn('slow').fadeOut('slow', function() {
      animate_one(index+1);
    });
  }
  animate_one(0);
});

小提琴

于 2012-06-18T09:59:38.703 回答
1

异步执行的魔力。

事件的时间顺序：

    $('#slide').html(image1);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image2);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image3);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later

循环将进入第二次（和第三次等）迭代，在第一个动画完成之前重置图像直到它是最后一个。

于 2012-06-18T09:54:12.233 回答
1

您正在设置 $('#slide') html 8 次，每次都重写它。可能您打算将每个图像附加到它？

$('#slide').append( $(value) );

此外，您在#slide 上调用 hide() 8 次。这是你的意图吗？

编辑：未经测试，但让您了解如何使用回调

var imgArray = new Array(...)

var doAnimate = function(key){
   if(!value = imgArray[key]) return;
   $('#slide').html(value);
   $('#slide').hide().fadeIn('slow').fadeOut('slow', function(){
       doAnimate(key++);
   });
}

doAnimate(0);
于 2012-06-18T09:52:38.690 回答
0

一种方法（具有很好的淡入淡出效果）：

jsBin 演示

将一个图像放入 DIV 中，而不仅仅是循环将新图像添加到 DIV中的数组。使用选择器淡出旧图像（并删除）:last。

var images = ['image1.jpg','image2.jpg','image3.jpg'];       // your images
                                                              
var c = 0;                                                   // set the first image
$('#slide').prepend( '<img src="'+ images[c] +'" />' );      // prepend one

function loop(){ 
    $('#slide').prepend( '<img src="'+ images[c++ % images.length] +'" />' );    
       $('#slide img:last').delay(1000).fadeTo(700,0,function(){
            $(this).remove();                                // remove last one
            loop();
       });  
}
loop();

在您的 css 中确保您的图像绝对定位。

于 2012-06-18T10:26:29.537 回答