javascript - 如何在mouseout上结束.switchClass事件？

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

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

我遇到的问题是:如果用户在.hover鼠标进入处理程序的.switchClass动画完成之前将鼠标移出div，则鼠标移出处理程序中的.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");}
});
});

最佳答案

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

本质上，在mouse in和mouse out事件中，执行$(this).stop(true, true)可以中断动画并跳转到动画的最终结果。

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