鼠标悬停时淡出 jQuery 幻灯片闪烁/队列问题 (slideSwitch.js)

Question

我改编了 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 );
  });
});

Answer 1

好吧，我解决了这个问题，问题不在代码中，而在于父“幻灯片”div 中嵌套了一个额外的 div。该函数同时触发了它们并造成了混乱。

干杯