Question

如何在我的第一张图片完全隐藏之前确保我的下一张图片不会出现？它是用Javascript编写的，是一个单行代码，我想确保下一个不会在最后一个淡出之前淡入...因为这会导致滑块扭曲。这是代码：

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

如何在我的第一张图片完全隐藏之前确保我的下一张图片不会出现？

Answer 1

以下是一个工作示例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');
    });
});

Answer 2

根据jQuery docs，提供对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()。

我怎样才能确保我的下一张图片不会出现

2 个答案: