Question

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

enter image description here

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

enter image description here

我遇到的问题是：如果用户在.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");}                    
}); 
});

Answer 1

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

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

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

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

1 个答案: