jquery menu buttons mouseover effect

Question

Hello

I have two divs. One is position:absolute (.buttonEffectWrapper), over the top of the other div (called .rightColumnButtonHighlighted).

I also have the following JS code:

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

It works fine, except it applies to all the divs. I need it to only apply to the current div, and I am not sure how to do that.

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>

See http://www.raceramps.com/v2 for the effect.

Answer 1

Use this:

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

You ware attaching a "hover" event handler to every matched DIV which is OK, but then in your functions you animated all the DIVs not just the current one. $(this) inside the function refers to the current element.

ps: you can use the hover helper in jQuery to make the code a little bit more readable:

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

I've updated the code. Use next() to get the next element after $(this)

Answer 2

It's because you're selecting all of the elements with class "rightColumnButtonText". You need to do a $(this).siblings('.rightColumnButtonText').stop().animate({opacity: 1}, {duration:300})

Answer 3

<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>

that should work right? somethings not quite right about it though....

Answer 4

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

Answer 5

Final working code...thanks all!

$(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 } );

        }
    );
} );