鼠标悬停时褪色的jQuery幻灯片闪烁/队列问题（slideSwitch.js）

Posted 2023-05-08

【中文标题】鼠标悬停时褪色的jQuery幻灯片闪烁/队列问题（slideSwitch.js）

【英文标题】：Fading jQuery slideshow flicker / queue problem on mouseover (slideSwitch.js)

【发布时间】：2011-03-22 02:44:48

【问题描述】：

我改编了 Jon Raasch 的 slideSwitch.js tutorial 中的代码，这基本上是一个褪色的幻灯片。该脚本将“活动”幻灯片提升到更高的 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 );
  );
);

【问题讨论】：

使用.stop(true, true)。这很丑，但有时它是让某些视觉效果发挥作用的唯一方法。

我已经尝试过了，但我不知道该放在哪里。你会在哪里建议？

【参考方案1】：

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

干杯