使用单独的功能单击停止动画

Question

我有一个div，其中有多个图像，我们根据另一个图像的点击动画。它有两个选项可以点击，如下面的代码

$('.AspenL').click( function() { 
    $('.route-box').fadeOut('slow');
    $('.AspenR').fadeIn('slow');
});
$('.AspenR .walking-icon').click( function() { 
    $(".AspenDiv img").each(function(index) {
        $(this).delay(1000*index).fadeIn('slow');
        $(this).delay(9000).fadeOut('slow');
    });
    $('.AspenR').delay(100).fadeOut('slow');
});
$('.AspenR .handicap-icon').click( function() { 
    $(".Aspen-elvDiv img").each(function(index) {
        $(this).delay(1000*index).fadeIn('slow');
        $(this).delay(8000).fadeOut('slow');
    });
    $('.AspenR').delay(100).fadeOut('slow');
});

如果点击其中一个停止其他动画，我怎么能这样做呢？目前，如果你足够快，你可以点击这两个图像，当它只显示.AspenR .walking-icon或.AspenR .handicap-icon animation.

时，它会启动两个动画队列

Answer 1

使用stop()方法。如果这是你的意图，请将clearQueue和jumpToEnd参数提供为true以完成当前动画。