Анимация паузы / возобновления с циклом Jquery - PullRequest
Новая
       40

Анимация паузы / возобновления с циклом Jquery

1 голос
/ 27 декабря 2011

UPDATE

У меня это работает до некоторой степени, я не уверен, почему, но как только анимация вызывается с использованием обратного вызова с циклом, кажется, что единственный способ взаимодействия с ней - это использование метода .stop в jquery.

Если бы кто-нибудь мог пролить свет на это для меня, это было бы замечательно.

Спасибо!

ОРИГИНАЛЬНЫЙ ВОПРОС НИЖЕ

Я использую этот плагин Pause / Resume: http://tobia.github.com/Pause/

Я проверил его с помощью простой анимации, и он отлично работает.

Моя проблема в том, что я пытаюсь использовать его в цикле Jquery, и он вообще не работает.

В настоящее время у меня есть довольно стандартный бегунок цикла, в котором есть навигация. Каждый элемент навигации имеет панель таймера, которая начинается с 320 пикселей и анимируется до 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();
});

Ответы [ 2 ]

3 голосов
/ 26 ноября 2012

Это немного поздно, но вы можете приостановить анимацию, используя animation-play-state. В сочетании с jquery hover вы получите что-то вроде этого ... 

$(".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"
        });
    }
);
2 голосов
/ 27 декабря 2011

Пропустить плагин паузы - jQuery Cycle имеет функциональность паузы / возобновления встроенный. 

$("#container_Slider").hover(function () {
    $('#slider_images .slideshow').cycle('pause');
}, function () {
    $('#slider_images .slideshow').cycle('resume');
});
...