jQuery淡入/淡出和延迟，取消以前的动画

Question

我想使这项工作，并可中断。应该有1秒的淡入淡出，1秒的淡出以及3秒的延迟，但是在3秒或1秒的淡入/淡出期间，可能会发生另一个应该发生的动作 - 停止先前的动作并且从不完成动作。 例如，在3秒显示图像期间，用户想要进入下一个/下一个/下一个/下一个，因此立即停止动画并转到下一个/下一个/下一个/下一个（多用户点击）这个。外部调用：SlideShow（1）;其中，或幻灯片（-1）;,等等

function SlideShow(action) { 
     slideCount = (slideCount+action) % totalSlides; 

     slides.eq(slideCount).fadeIn(fadeInAmount); 

     // add 3 second delay/SetTimeout/etc here 
     // how should setTimeout be involved here so that it, and the fadein/fadeout are stoppable (without ever continuing) 

     slides.eq(slideCount).fadeOut(fadeOutAmount,function() { 

     slideCount = (slideCount+increment) % totalSlides; 
     SlideShow(0); 
    }); 

    } 

这与1秒淡入，3S延迟，1S淡出

slides.eq(slideCount).fadeIn(fadeInAmount).delay(fadeDelay).addClass('jqImage').fadeOut(fadeOutAmount,function() { 
     slideCount = (slideCount+increment) % totalSlides; 
     SlideShow(0); 
}); 

这里起始点一个非工作的尝试使用的setTimeout：

function timerStop() { 
     if (runningTimer) { 
      clearTimeout(runningTimer); 
      runningTimer = 0; 
     } 
    } 


    var runningTimer; 

    function SlideShow(action) { 

    // $('body').stop(); slides.eq(slideCount).dequeue(); slides.eq(slideCount).stop(); 


    slideCount=(slideCount+action) % totalSlides; 

    $('#slideControls').html(
     (slideCount+1) + "/" + totalSlides 
     + "<br>" + "Delay: " + fadeDelay/1000 
     + "<br>" + "Skip: " + increment 
    ); 

    $('#slideStatusbar').html(slides.eq(slideCount).find('img').attr('src').replace(/^.*[\\\/]/, '')); // Filename only 
    //slides.eq(slideCount).fadeIn(fadeInAmount).delay(fadeDelay).addClass('jqImage').fadeOut(fadeOutAmount,function() { 
    //  slideCount < totalSlides-1 ? slideCount+=increment : slideCount=0; 
    // slideCount = (slideCount+increment) % totalSlides; 
    // SlideShow(0); 


// slides.eq(slideCount).addClass('jqImage'); 
    slides.eq(slideCount).fadeIn(fadeInAmount); 


    runningTimer=setTimeout(function(){ 

     slides.eq(slideCount).fadeOut(fadeOutAmount,function() { 
     slideCount = (slideCount + increment) % totalSlides; //slideCount = (slideCount + (action ? action : increment)) % totalSlides; 
     SlideShow(0); 
     }); 

    }, 1000); 




    } 

Answer 1

这并不容易。
花了几个小时才解决。

您在服务器上为我制作的临时“沙箱”非常有用。
如果没有它，我将无法解决问题。
;）

这里是你的函数现在：

var slideCountAdjusted; 
    var slideCount; 
    function SlideShow(action) { 

    //---------- read from sliders ----------- 
    slideCount = parseInt($('#slider1').val()-1); 
    fadeDelay = parseInt($('#slider2').val()); 
    step  = parseInt($('#slider3').val()); 
    //---------------------------------------- 

    slideCountAdjusted=(slideCount+action) % totalSlides; 
    if(slideCount>=totalSlides && action>0){ 
     slideCountAdjusted=0; 
    } 
    if(slideCount==0 && action<0){ 
     slideCountAdjusted=totalSlides-1; 
    } 

    $('#slider1').val(slideCountAdjusted+1).change(); 

    $('#slideStatusbar').html( 
     jscript_slideshowLinks              // California > 
     +  " > " 
     +  slides.eq(slideCountAdjusted).find('img').attr('src').replace(/^.*[\\\/]/, '')  // filename 
    ); // Filename only 

    if(intervalEnabled){ 
     runningTimer=setTimeout(function(){ 
     slides.eq(slideCount).fadeOut(fadeOutAmount,function() { 

      slideCount = (slideCount + step) % totalSlides; //slideCount = (slideCount + (action ? action : increment)) % totalSlides; 
      $('#slider1').val(slideCount+1).change(); 

      SlideShow(0); 
     }); 
     }, fadeDelay*1000); 
    } 

    if(showNow){ 
     slides.eq(slideCount).fadeOut(fadeOutAmount,function() { 
     slides.eq(slideCountAdjusted).fadeIn(fadeInAmount); 
     }); 
    }else{ 
     slides.eq(slideCountAdjusted).fadeIn(fadeInAmount); 
    } 
    } 

我也改变了这些点击处理程序：

$('#slideshowPlay').off("click").on("click", function (e){ mySliderPlay(); SlideShow(0); }); 
    $('#slideshowPause').off("click").on("click", function (e){ mySliderPause(); }); 

    $('#slideshowPrevious').click(function (e) { mySliderBack(); }); 
    $('#slideshowNext').click(function (e)  { mySliderForward(); }); 

这里是那些处理程序：

var intervalEnabled=true; 
    var showNow=false; 

    //--------------------------------------------------------------------- 
    // slideshowTimer routines - start 
    //--------------------------------------------------------------------- 
    function mySliderPause() { 
    console.log("PAUSE button pressed;"); 
    intervalEnabled=false; 
    clearTimeout(runningTimer); 
    } 
    function mySliderPlay() { 
    console.log("PLAY button pressed;"); 
    intervalEnabled=true; 
    showNow=false; 
    } 
    function mySliderBack() { 
    console.log("BACK button pressed;"); 
    intervalEnabled=false; 
    showNow=true; 
    clearTimeout(runningTimer); 
    SlideShow(-1); 

    } 
    function mySliderForward() { 
    console.log("FORWARD button pressed;"); 
    intervalEnabled=false; 
    showNow=true; 
    clearTimeout(runningTimer); 
    SlideShow(1); 
    } 

一些在你的index.html中有更多的变化。 ..

我注释掉这些脚本调用，我甚至不知道他们应该做的事情...
但自从我把他们赶走，你的页面加载快一点和怪间隔时间的行为让我觉得神奇地消失了很久。

<!--script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script> 
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script> 
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script--> 

我也注释掉这个jQuery lib中调用：

<!--script src='/ans/jquery/jquery-1.11.0.min.js'></script--> 

因为你太调用此一个。所以我把它移动了几行。

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>