Question

我有动画标签，将鼠标悬停在链接h2上（以激活幻灯片动画），我会像手风琴一样上/下动画幻灯片效果。

<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-->

然而，动画并没有停止。手风琴效果（滑动效果）持续射击。有办法解决这个问题吗？

（顺便说一句，到目前为止，我尝试过使用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'});

Answer 2

我会将它用于类和css：

<style>
.pane{
   height:0;
   overflow:hidden;
}

.pane.active{
   height:100px;
}

</style>

然后我将使用jQuery添加类，如下所示。

<script>
$(document).ready(function() {
    $(".slideBox").on('hover', function(){
      $(this).prev('.pane').addClass('active');
    });
}
</script>

jQuery防止动画分区的跳跃

2 个答案: