일시 정지/

Question

가 UPDATE 나는 그것이 어느 정도 작업있어 한

, 난 잘 모르겠어요 JQuery와주기와 애니메이션을 다시 시작 그것과 상호 작용하는 유일한 방법은 jquery의 .stop 메소드를 사용하는 것입니다.

누구든지 나를 위해이 부분을 밝힐 수 있다면 정말 좋을 것입니다.

감사합니다.

아래

원래의 질문에 나는이 일시 정지/다시 시작 플러그인을 사용하고 있습니다 : 나는 간단한 애니메이션으로 그것을 밖으로 테스트 한 http://tobia.github.com/Pause/

을하고 그것을 잘 작동합니다.

내 문제는 Jquery Cycle 내에서 사용하려고하는데 전혀 작동하지 않는다는 것입니다.

현재 탐색 기능이있는 예쁜 표준주기 슬라이더가 있습니다. 각 탐색 항목에는 320px에서 시작하는 타이머 막대가 있으며 각 슬라이드의 길이에 따라 0으로 아래로 움직입니다.

나는 일시 중지 플러그인을이 기능과 통합하는 방법을 알아 내려고하고 있으므로 슬라이드 쇼 위로 마우스를 가져 가면 타이머 막대 애니메이션이 일시 중지되고 마우스를 놓으면 다시 시작됩니다.

누구든지 나를 도와 줄 수 있습니까?

미리 감사드립니다.

여기 내 코드입니다 :

HTML (단지 최소한의 코드를 유지하기 위해 하나 개의 슬라이드를 표시)

<div id="slider_images"> 
      <div class="slideshow"> 
      <div><img src="img_path" title="Slider Span" alt="Slider Span"/> <div class="slider_buttons"><a href="/index.php?p=about-us" class="learn-more-btn">Learn More</a> <a href="#" class="send-me-information fancyNews">Send Me Information</a></div> </div> 
     </div> 
     </div> 


<ul id="multiNav"><li><a class="slide0" href="#">Why CBHM?</a> 
<p> 
Why You Should Choose Us 
</p> 
<div id="progress-bar"></div> 
<div id="progressbar"> 
    <div id="progressvalue"></div> 
</div> 
</li> 
</ul> 

JS

$('.slideshow').cycle({ 
    fx: 'fade', 
    timeout: 7000, 
    pager: '#multiNav', 
    after: onAfter, 
     before: before, 
    pagerAnchorBuilder: function(idx, slide) { 

    return '#multiNav li:eq(' + (idx) + ') a'; 

    } 

}); 

function before() { 
$('.activeSlide #progress-bar').css({ width: "0%" }); 

} 


function onAfter() { 
$('.activeSlide #progress-bar').animate({ width: "280px"}, 0, function() { 
$('.activeSlide #progress-bar').animate({ width: "0px" }, 6200); 
}); 

} 


$("#container_Slider").hover(function() { 
$('#progress-bar').pause(); 
}, function() { 
$('#progress-bar').resume(); 
}); 

Answer 1

일시 정지 플러그인을 건너 뛰기 - - jQuery Cycle에 pause/resume functionality이 내장되어 있습니다. .

Answer 2

조금 늦었지만 애니메이션 재생 상태를 사용하여 애니메이션을 일시 중지 할 수 있습니다. jquery 호버와 결합하면 다음과 같은 결과를 얻을 수 있습니다.

$(".slideshow").hover(
    function() { 
     $('.activeSlide #progress-bar').css({ 
     "animation-play-state" : "paused", 
     "-webkit-animation-play-state" : "paused", 
     "-moz-animation-play-state" : "paused", 
     "-o-animation-play-state" : "paused" 
     }); 
    }, 
    function() { 
     $('.activeSlide #progress-bar').css({ 
     "animation-play-state": "running", 
     "-webkit-animation-play-state": "running", 
     "-moz-animation-play-state": "running", 
     "-o-animation-play-state": "running" 
     }); 
    } 
);