3

我目前正在一个页面顶部有一个主广告牌的网站上工作。在那个广告牌上，右边有 6 个缩略图，用于切换广告牌中显示的 div。它看起来像这样：

在此处输入图像描述

当您将鼠标悬停在缩略图上时，它们会向左延伸以显示如下文本：

在此处输入图像描述

我遇到的问题是：如果用户在 .hover mouse-in 处理程序的 .switchClass 动画完成之前将鼠标移出 div ，则 mouse-out 处理程序中的 .switchClass 事件要么触发得太早，要么完全没有，即使在用户将鼠标移出后，悬停效果仍然存在。基本上让缩略图像上图一样“打开”。

当用户鼠标移出时，有没有办法中断鼠标移入 .switchClass 动画？

我的代码如下：

HTML：

                <div id="bbTab1" class ="inactive" style="margin-top:30px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab1.png" />
                    <div class="leftBorder"></div>
                </div><!--bbTab1-->

                <div id="bbTab2" class ="inactive" style="margin-top:95px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab2.png" />
                    <div class="leftBorder"></div>
                </div><!--bbTab2-->

                <div id="bbTab3" class ="inactive" style="margin-top:160px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab3.png" />
                    <div class="leftBorder"></div>
                </div><!--bbTab3-->

                <div id="bbTab4" class ="inactive" style="margin-top:225px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab4.png" />
                    <div class="leftBorder"></div>
                </div><!--bbTab4-->

                <div id="bbTab5" class ="inactive" style="margin-top:290px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab5.png" />
                    <span class="bText"> This is some text </span>
                    <div class="leftBorder"></div>
                </div><!--bbTab5-->

                <div id="bbTab6" class="inactive" style="margin-top:355px">
                    <div class="rightBorder"></div>
                    <img class="tabImage" src="images/bbtab6.png" />
                    <div class="leftBorder"></div>
                </div><!--bbTab6-->

CSS：

    #billboard .inactive{
    width:53px;
    height:57px;
    border-bottom: 1px solid #ACACAC;
    border-top: 1px solid #ACACAC;
    background-color:#FFFFFF;
    position:absolute;
    z-index:5000;
    right:0;
}
#billboard .inactiveHover{
    width:180px; /*61px*/
    height:57px;
    background-color: white;
    border-bottom: 1px solid #FF9B15;
    border-top: 1px solid #FF9B15;
    z-index:5000;
    position:absolute;
    right:0;
}   
#billboard .active{
    width:61px; /*61px*/
    height:57px;
    background-color: white;
    border-bottom: 1px solid #FF9B15;
    border-top: 1px solid #FF9B15;
    z-index:5000;
    position:absolute;
    right:0;
}

JS：使用 Jquery 1.8.2 和 Jquery UI 1.9.1

$(function() {
$(".inactive").hover(
    function () {
        if ($(this).hasClass("active")){return;}
        else{$(this).switchClass("inactive", "inactiveHover", 300, "easeOutQuint");}
    },
    function () {
        if($(this).hasClass("active")){
            $(this).removeClass("inactive").removeClass("inactiveHover");   
        }
        else{$(this).switchClass("inactiveHover", "inactive", 300, "easeOutQuint");}                    
}); 
});
4

1 回答 1

1

听起来您应该使用该.stop()事件

本质上，在鼠标移入和鼠标移出事件中，do 都会$(this).stop(true, true)中断动画并跳转到动画的最终结果。

或者，如果您想让它停止而不跳转到最终动画，请执行$(this).stop(true, false)

于 2012-11-27T18:25:03.400 回答