javascript - jQuery 防止动画分区的跳跃

Question

我有动画选项卡，将鼠标悬停在链接 h2 上(以触发幻灯片动画)，我会向上/向下设置幻灯片效果，就像 Accordion 一样。

<div class="slideBox">
    <div class="pane"><img src="images/homepage/sm1.jpg" alt="Room" /></div><!--pane-->
    <h2 class="drkbluebg" style="border-bottom:7px solid #fff;">
        <b>main title</b>
        <br />
        photo caption
    </h2>
    <div class="pane" style="display:block;">
        <img src="images/homepage/sm2.jpg" alt="Room" />
    </div><!--pane-->
    <h2 class="current greybg"><b>main title</b><br/>photo caption</h2>
</div><!--slideBox-->

但是，动画不会停止。 Accordion 效果(滑动效果)持续发射。 有办法解决这个问题吗？

(顺便说一句，到目前为止，我尝试使用 jQuerytools，但如果您有其他解决方案，欢迎提出)

这是JS代码:

$(function() {
    $(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseover'});    
});

这是我所做的链接http://www.ixpander.com/simulation/so_issue/

Answer 1

尝试使用 mouseenter 而不是 mouseover 这样它只会在鼠标第一次进入元素时触发，而不是每次鼠标移动时触发

$(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseenter'});