3

私は現在、ページの上部にメインの看板があるサイトに取り組んでいます。そのビルボードには、ビルボードに表示されている div を切り替えるために使用される 6 つのサムネイルが右側にあります。次のようになります。

ここに画像の説明を入力

サムネイルにカーソルを合わせると、左に伸びて次のようなテキストが表示されます。

ここに画像の説明を入力

私が抱えている問題は次のとおりです。.switchClass アニメーションが .hover マウスイン ハンドラーで終了する前に、ユーザーがマウスを 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");}                    
}); 
});
4

1 に答える 1

1

これは、イベントを使用する必要があるようです.stop()

基本的に、マウス イン イベントとマウス アウト イベントの両方で$(this).stop(true, true)、アニメーションを中断し、アニメーションの最終結果にジャンプします。

または、最終的なアニメーションにジャンプせずに停止したい場合は、次のようにします。$(this).stop(true, false)

于 2012-11-27T18:25:03.400 に答える