jQuery淡化in/out并延迟，取消之前的动画

Question

我想让它工作并且可以被打断。应该有 1 秒的淡入，1 秒的淡出，中间有 3 秒的延迟，但在那 3 秒或 1 秒 fadein/fadeout 期间，可能会有另一个应该发生的动作发生——停止之前的动作并且永远不会完成它。例如，在显示图像的 3 秒内，用户想要转到 next/next/next/next，因此动画应立即停止并转到 next/next/next/next（多次用户单击），而无需完成在此之前开始的动画。

外部调用：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 秒，延迟 3 秒，淡出 1 秒

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

这并不容易。
花了几个小时才修好。

你在服务器上为我制作的临时 "sandbox" 真的很有用。
如果没有它，我将无法解决问题。
;)

这是你现在的功能：

  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...

我注释掉了这些脚本调用，我什至不知道它们应该做什么...
但是自从我删除它们后，您的页面加载速度更快了 AND 奇怪的间隔行为让我花了很长时间才发现它神奇地消失了。

<!--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>

jQuery淡化in/out并延迟，取消之前的动画

jQuery fade in/out and delay, cancelling previous animation

jquery

settimeout

fadein