Question

更新

我已经让它工作到一定程度，我不知道为什么但是一旦使用带循环的after回调调用动画，似乎与它交互的唯一方法是使用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悬停你可以得到类似的东西......

$(".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"
        });
    }
);

Answer 2

跳过暂停插件 - jQuery Cycle内置了pause/resume functionality。

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

使用Jquery循环暂停/恢复动画

2 个答案: