jquery - jqueryメニューボタンのマウスオーバー効果

Question

私は2つのdivを持っています。1つはposition：absolute（.buttonEffectWrapper）で、他のdiv（.rightColumnButtonHighlightedと呼ばれます）の上にあります。

次のJSコードもあります。

$(function(){
 $('.buttonEffectWrapper')
  .mouseover(function(){
   $('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300})
  })
  .mouseout(function(){
     $('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300})
  })
});

すべてのdivに適用されることを除いて、正常に動作します。現在のdivにのみ適用する必要がありますが、その方法がわかりません。

DIVS：

<div class="buttonEffectWrapper"></div>
<div id="rightColumnButtonText" >CAR SERVICE</div>
<div id="car-service-highlighted" class="rightColumnButtonHighlighted"></div>

<div class="buttonEffectWrapper"></div>
<div id="rightColumnButtonText" >TRAILER HAULING</div>
<div id="trailer-hauling-highlighted" class="rightColumnButtonHighlighted"></div>

効果については、 http：//www.raceramps.com/v2を参照してください。

score 1 · Accepted Answer

$('.buttonEffectWrapper').hover(function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 1}, {duration:300});
}, function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 0}, {duration:300})
})

score 0 · Accepted Answer

これを使って：

$(function(){
    $( '.buttonEffectWrapper' ).mouseover ( function () {
        $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 1 }, { duration: 300 } );
    } ).mouseout ( function () {
        $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 0 }, { duration: 300 } );
    } );
} );

一致するすべてのDIVに「ホバー」イベントハンドラーをアタッチすることは問題ありませんが、関数では、現在のDIVだけでなくすべてのDIVをアニメーション化します。関数内の$（this）は、現在の要素を参照します。

ps：jQueryのホバーヘルパーを使用して、コードをもう少し読みやすくすることができます。

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {
            $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 1 }, { duration: 300 } );
        },
        function () {
            $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 0 }, { duration: 300 } );
        }
    );
} );

コードを更新しました。next()次の要素を取得するために使用します$(this)

score 0 · Accepted Answer

これは、クラス「rightColumnButtonText」のすべての要素を選択しているためです。あなたはする必要があります$(this).siblings('.rightColumnButtonText').stop().animate({opacity: 1}, {duration:300})

score 0 · Accepted Answer

<script type="text/javascript">

$(function(){

    $('.buttonEffectWrapper')

        .mouseover(function(){
            $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300}
        })
        .mouseout(function(){
                    $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300}
        })
});
</script>

それは正しく機能するはずですか？しかし、それについては完全に正しくないことがあります。

score 0 · Accepted Answer

最終的に機能するコード...すべてに感謝します！

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1 }, { duration: 300 } );

        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0 }, { duration: 300 } );

        }
    );
} );

jquery - jqueryメニューボタンのマウスオーバー効果

5 に答える 5

Related

Reference