1

更新

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

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

谢谢！

下面的原始问题

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

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

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

目前，我有一个非常标准的循环滑块，它有一个导航。每个导航项都有一个计时器栏，它从 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();
});
4

2 回答 2

3

这有点晚了，但您可以使用动画播放状态暂停动画。结合 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"
        });
    }
);
于 2012-11-26T17:01:02.740 回答
2

跳过暂停插件——jQuery Cycle 内置了暂停/恢复功能 。

$("#container_Slider").hover(function () {
    $('#slider_images .slideshow').cycle('pause');
}, function () {
    $('#slider_images .slideshow').cycle('resume');
});
于 2011-12-27T17:58:48.897 回答