jquery - .stop() 带有回调的多个菊花链 UI 动画

Question

jsfiddle

我正在用 jQuery 制作幻灯片。每张幻灯片都有多个图层（幻灯片中的幻灯片）。我正在尝试添加一个停止按钮，它将停止所有动画。我遇到的问题是停止按钮实际上只在单击一次时“有时”停止幻灯片。但它会“通常”在双击时停止幻灯片放映。如何让所有动画停止？

整个代码在上面链接的 jsfiddle 上。

这是我到目前为止所尝试的：

$("#stop").live("click", function() {

    // tried this
    /*
    $('#'+slides['curSlide']).stop(true,false);
    $('#'+slides[ slides['curSlide'] ]['curLayer']).stop(true,false);
    */

    // tried this
    /*
    jQuery.fx.off = true;
    */

    // tried this
    /*
    $('#slides > .slide').each(function(index){
        $(this).stop(true);
        $('#'+index+' > .slideLayer').each(function(){
            $(this).stop(true);
        });
    });
    */

});

Answer 1

您正在使用delay触发动画。从文档：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

由于它不提供取消延迟任务的直接方法，因此您需要设置一个标志，延迟函数可以将其作为一种中断信号。