Question

我有一个幻灯片，它基本上改变了图像的src属性并将其淡入和淡出。

function startSlideshow() {
    if (i >= images.length) { i = 0 }

    var path = images[i].path;
    var name = images[i].name;
    i++;

    image.attr('src', path)

    image.animate({opacity:1}, 1000)
         .delay(5000)
         .animate({opacity:0}, 500, startSlideshow);
}

这很有效。

我也有一些我称之为图像选择器的东西。它看起来像这样：

<ul id="ImagePicker">
    <li>•</li>
    <li>•</li>
    <li>•</li>
</ul>

当您点击其中一个项目时，幻灯片显示应显示相应的图像。

$('#ImagePicker li').click(function () {       
    image.stop(true, false)
         .animate({ opacity: 0 }, 10, startSlideshow);
});

问题在于它有时会出现问题，我不确定它为什么会发生。如果你在淡出期间点击（我认为）.animate({opacity:0}, 500, startSlideshow)，它会开始变得更快。

有人知道为什么会这样吗？

更新

实际上它似乎是在延迟期间而不是在动画期间发生的。

更新2

我可以像这样修理它，但感觉有点hacky：

image.animate({ opacity: 1 }, 1000)
     .animate({ opacity: 1 }, 5000)
     .animate({opacity:0}, 1000, startSlideshow);

Answer 1

问题与延迟有关（）我通过这样做来解决这个问题：

image.animate({ opacity: 1 }, 1000)
     .animate({ opacity: 1 }, 5000)
     .animate({opacity:0}, 1000, startSlideshow);

我不确定延迟有什么问题，但我在这里找到了一些信息：

http://api.jquery.com/delay/
http://dev.jquery.com/ticket/6576

希望它有所帮助。

Answer 2

我运气不好这样的动画。尝试使用回调来对多个动画进行排序，这样他们就可以等待之前完成的动画。

而不是使用.delay，尝试使用setTimeout。

image.animate({opacity:1}, 1000, function(){
    setTimeout(image.animate({opacity:0}, 500, startSlideshow), 5000);
});

jQuery延迟：加速排队？

2 个答案: