.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触发动画。来自docs：

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它不提供取消延迟的方法.delay（）不是JavaScript本地setTimeout函数的替代品，这对于某些用例可能更合适。

由于它不提供取消延迟任务的直接方式，因此您需要设置一个标志，表示延迟的功能可以作为一种中断信号采集。