jQuery淡入/淡出和延迟，取消先前的动画 [英] jQuery fade in/out and delay, cancelling previous animation

问题描述

我想使它正常工作并且可以被打断.应该有1秒的淡入，1秒的淡入以及介于3秒之间的延迟，但是在这3秒或1秒的淡入/淡入期间，可能还会发生另一种操作-停止先前的操作，再也不要完成它. 例如，在显示图像的3秒内，用户想要转到下一个/下一个/下一个/下一个，因此动画应立即停止并转到下一个/下一个/下一个/下一个(多次用户点击)，而无需完成在此之前开始的动画

I want to make this work and be interruptible. There should be 1second fadein, 1second fadeout with 3s delay in between, but during that 3seconds or 1second fadein/fadeout, there maybe another action taking place that should take place -- stop previous action and never complete it. Eg during 3second of showing image, the user wants to go to next/next/next/next, so immediately animation should stop and go to next/next/next/next (multiple user clicks) without ever completing the animation started prior to this.

外部呼叫:SlideShow(1);或SlideShow(-1);等

external calls: SlideShow(1); or SlideShow(-1);, etc

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);
    });

  }

这是1s淡入，3s延迟，1s淡出的起点

This was the starting point with 1s fadein, 3s delay, 1s fadeout

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

这是使用setTimeout的一种无效尝试:

here is one non-working attempt using 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);




  }

推荐答案

这并不容易.
修复花费了几个小时.

This wasn't an easy one.
It took a couple hours to fix.

您在服务器上为我制作的临时沙盒"非常有用.
没有它，我将无法解决问题.
;)

The temporary "sandbox" you made for me on your server was really usefull.
I would not have been able to solve the problem without it.
;)

这是您现在的功能:

  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);
    }
  }

我还更改了以下点击处理程序:

I also changed these click handlers:

  $('#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 ...

我注释掉了这些脚本调用，我什至不知道它们应该做什么...
但是自从我删除它们以来，您的页面加载速度更快了，并且这种奇怪的间隔行为使我花了很长时间才发现魔法消失了.

I commented out these script calls, which I don't even know what they were supposed to do...
But since I removed them, your page is loading a bit faster AND the strange interval behavior which took me soo long to find magically dissapeared.

<!--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调用:

I also commented out this jQuery lib call:

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

因为您也称呼此人.所以我将其移动了几行.

Because you were calling this one too. So I move it a couple line up.

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

这篇关于jQuery淡入/淡出和延迟，取消先前的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！