jquery - 使用 Jquery Cycle 暂停/恢复动画

Question

更新

我已经让它在一定程度上工作了，我不知道为什么，但是一旦使用带有循环的 after 回调调用动画，似乎与其交互的唯一方法是使用 jquery 的 .stop 方法。

如果有人能为我阐明这一点，那就太棒了。

谢谢!

下面的原始问题

我正在使用这个暂停/恢复插件:http://tobia.github.com/Pause/

我已经用一个简单的动画对其进行了测试，效果很好。

我的问题是我试图在 Jquery Cycle 中使用它，但它根本不起作用。

目前，我有一个非常标准的自行车 slider ，它有一个导航。每个导航项都有一个计时器栏，其起始高度为 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();
});

Answer 1

这有点晚了，但是您可以使用animation-play-state 暂停动画。结合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"
        });
    }
);