鼠标悬停时淡出 jQuery 幻灯片闪烁/队列问题 (slideSwitch.js)
我改编了 Jon Raasch 的 slideSwitch.js 教程 中的代码,其中基本上是一个褪色的幻灯片。该脚本将“活动”幻灯片提升到更高的 z-index,并设置不透明度动画以实现淡入淡出效果。
它工作正常,添加了暂停以在鼠标悬停时暂时停止幻灯片放映。
我遇到的问题是,当我反复将鼠标悬停在幻灯片上/移开幻灯片时,我试图阻止脚本排队。当这种情况发生时,它会闪烁并变得狂暴。
我已经尝试过 stop() 但没有让它正常工作。
有人可以建议我在下面的代码中插入这个吗?或者如果我以错误的方式处理这件事!
干杯
卢克
function slideSwitch() {
var $active = $('#hp-featured div.active');
if ( $active.length == 0 ) $active = $('#hp-featured div:last');
var $next = $active.next().length ? $active.next()
: $('#hp-featured div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
var playSlideshow = setInterval( "slideSwitch()", 5000 );
$('#hp-featured div').hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( "slideSwitch()", 5000 );
});
});
I've adapted code from the slideSwitch.js tutorial by Jon Raasch, which is basically a fading slideshow. The script promotes the 'active' slide to a higher z-index and animates the opacity for a fading effect.
It's working fine with a pause added to stop the slideshow temporarily on mouseover.
The issue I'm having is I'm trying to stop the script from queuing up when repeatedly mousing over/off the slideshow. When this happens it flickers and goes berserk.
I've experimented with stop() but haven't got it working properly.
Can someone advise me where to insert this in the following code? Or if I am going about it the wrong way!!
Cheers
Luke
function slideSwitch() {
var $active = $('#hp-featured div.active');
if ( $active.length == 0 ) $active = $('#hp-featured div:last');
var $next = $active.next().length ? $active.next()
: $('#hp-featured div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
var playSlideshow = setInterval( "slideSwitch()", 5000 );
$('#hp-featured div').hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( "slideSwitch()", 5000 );
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧,我解决了这个问题,问题不在代码中,而在于父“幻灯片”div 中嵌套了一个额外的 div。该函数同时触发了它们并造成了混乱。
干杯
Ok I solved this one, the problem was not in the code but in the fact that there was an additional div nested inside the parent 'slide' div. The function was firing off both of them and causing the mayhem.
Cheers