更新
我已经让它在一定程度上工作,我不知道为什么,但是一旦使用带有循环的 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();
});