Question

我有两个不同的事件，在div上调用fadeIn / fadeOut。在某些情况下，元素可能是相同的。

<div class="details">Details</div>
<div class="details">Details2</div>

swiper.on('TouchStart', function () {
    $(".details:eq(" + swiper.previousIndex + ")").fadeOut({queue:true});
});
swiper.on('TouchEnd', function () {
    $(".details:eq(" + swiper.activeIndex + ")").fadeIn({queue: true});
});

我需要效果等待（并且仅当）另一个仍然在运行。

Answer 1

您可以使用以下语法：$(...).fadeIn({ queue: true });

这是一个fiddle，可以成功地将fadeOut和fadeIn投放到div。

或者，如果您只进行2次连续动画，则可以通过完成回调运行第二个动画，如下所示：

$(...).fadeIn('slow', function () {
    $(this).fadeOut(); 
});

以下是fiddle fadeOut，然后是fadeIn到div。

<强>更新

这似乎有效，它使用队列作为内存中的jQuery对象：

$(document).ready(function () {
    var option = { queue: 'tester', duration: 'slow' };
    $('.btn').click(function () {
        $({})
           .queue(function (next) {
               $('.test2').fadeOut('slow', next);
           })
           .queue(function (next) {
               $('.test1').fadeOut('slow', next);
           });  
     })
})

请参阅this fiddle。

另一个更新

因此，您要在两个单独的事件上触发相同元素的动画，并且不希望重叠它们。然后，在执行任何操作之前，您始终可以使用jQuery的stop()方法取消元素上正在运行的动画。例如：$(...).stop().fadeIn()。如果您愿意，也可以告诉stop()清除该元素的任何排队动画。

以下是使用stop()的{{3}}。当您将鼠标悬停在第一个div中时，请观察蓝色div。如果快速完成，则立即停止上一个动画。

jQuery如何排队fadeIn和fadeOut

1 个答案: