我怎样才能确保下一个图像不会出现呢?

How can I make sure my next image wont come up

本文关键字：图像 下一个 确保      更新时间：2023-09-26

我怎样才能确保我的下一个图像不会出现，直到我的第一个图像已经完全隐藏?它是用Javascript编写的，是单行代码，我想确保下一个不会在最后一个淡出之前淡出…因为这会导致滑块扭曲。下面是代码:

   $('.carousel_slider a:first-child').fadeOut().hide().next().fadeIn().show().end().appendTo('.carousel_slider');

我怎样才能确保我的下一个图像不会出现，直到我的第一个图像已经完全隐藏?

下面是一个工作示例http://jsfiddle.net/pV57K/.

var $first = $('.carousel_slider a:first-child');
$first.fadeOut(function() {
    $first.hide();
     var $next = $first.next();
     $next.fadeIn(function() {
        $next.show();
        $first.appendTo('.carousel_slider');
    });
});

根据jQuery文档，为fadeOut()提供一个回调:

.fadeOut( [duration ] [, complete ] )

如果提供，则在动画完成后触发回调。这对于按顺序将不同的动画串在一起很有用。回调不发送任何参数，但这被设置为正在动画的DOM元素。

不应该写$('thing').fadeOut().next().fadeIn()，应该写:

$('thing').fadeOut(function() {
    $(this).next().fadeIn()
})

这将确保对.fadeIn()的调用不会发生，直到对.fadeOut()的调用完成。同样，一旦不透明度达到0,.fadeOut()将设置display: none, .fadeIn()将恢复display。这意味着您实际上不需要调用.hide()和.show()。

相关文章：