CODEWITHSUNDEEP
jqueryjquery-animate
James
James

Reputation: 2860

jQuery hover effect triggers other list items

I have created a menu for the frontpage of a site I am building which has 8 buttons as shown below. I have written a small bit of jQuery that causes all of the menu items opacity to change apart from the item that is being hovered on. Here is my code:

HTML:

<div class="row-fluid" id="home_page_icons">
                <div class="span12">                    
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">News & Events</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Facilities</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Membership</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Pay As You Play</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Health & Fitness</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Exercise Classes</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Children's Activities</a>
                    <a class="last" href="<?php echo JURI::root() . 'index.php/news-events' ?>">Lane 9 Cafe</a>                                     
                </div>
            </div>

jQuery:

jQuery('#home_page_icons div a').hover( function() {            
        jQuery(this).siblings().fadeTo("fast", 0.3);
        },
        function() {
            jQuery(this).siblings().fadeTo("fast", 1.0);
        })

I have also created a JSFiddle to show my problem:

http://jsfiddle.net/2zeF8/

When you hover onto a menu item it works fine (all the other items change opacity) but if you hover between menu items, say between the far left and the far right the animation for all of the items in between is activated causing a blinking effect.

Does anyone have any ideas ot pointers as to how I solve this issue? Thanks

Upvotes: 0

Views: 410

Answers (3)

tbwiii
tbwiii

Reputation: 506

You may want to try using the on method

jQuery('#home_page_icons div').on('mouseenter','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 0.3);
}).on('mouseleave','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 1.0);
})

that will handle all hovers on the div and only do something if it's on an anchor

working fiddle

edit: Yes you'll need to add stop() the stop method - I see now what was happening to you

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45135

The only problem I see is if you move very quickly from one to another, then the other items blink in before they fade out again, which looks a bit silly. But it's an easy fix. Change your fade out line to this:

jQuery(this).siblings().stop().fadeTo("fast", 0.3);

That will stop any pending fade in.

Upvotes: 0

boz
boz

Reputation: 4908

Try this:

jQuery('#home_page_icons div a').hover(function () {
    jQuery(this).siblings().stop().fadeTo("fast", 0.3);
},

function () {
    jQuery(this).siblings().stop().fadeTo("fast", 1.0);
});

Demo - http://jsfiddle.net/bBtZp/

I added in a stop() before the fadeTo() which will stop any animations that are in the queue and then play the current one. This gets ride of the blinking effect you were talking about.

Upvotes: 2

Related Questions