jQuery 페이드 인/아웃 및 지연, 이전 애니메이션 취소

Question

이 작업을 중단하고 중단 할 수 있습니다. 그 사이에 3 초 지연이있는 1 초의 페이드 인과 1 초의 페이드 아웃이 있어야하지만 3 초 또는 1 초의 페이드 인/페이드 아웃 중에는 이전 작업을 중지하고 완료하지 않아야하는 다른 작업이 발생할 수 있습니다. 예를 들어 3 초 동안 이미지가 나타나면 사용자는 next/next/next/next로 이동하기를 원하기 때문에 이전에 시작된 애니메이션을 완료하지 않고 즉시 애니메이션을 중단하고 다음/다음/다음/다음 (여러 사용자 클릭)으로 이동해야합니다. 이.

외부 통화 : SlideShow (1); 또는 슬라이드 쇼 (-1); 등

이 1S 여기

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

을 페이드 fadein 1S, 3S 지연과 시작점은 하나의 비 작동을 시도하여에서는 setTimeout하였습니다

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

    } 

:

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

나는 이러한 클릭 핸들러 변경 :

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

일부 :

$('#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(); }); 

그리고 여기에 그 핸들러입니다 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>