CODEWITHSUNDEEP
jquery
Squrler
Squrler

Reputation: 3514

Using jQuery hover() to make element appear but not triggering animation twice

I'm building a simple slider with jCycle. When you hover over the slider, I'd like the 'previous' and 'next' arrows to appear. Once the cursor leaves the slider, I'd like the arrows to disappear again. The arrows are absolutely positioned over the slider.

The HTML for the slider:

        <div id="next"></div>
        <div id="prev"></div>

        <ul id="s2">            
            <li><img src="bla1" /></li> 
            <li><img src="bla2" /></li>
            <li><img src="bla3" /></li> 
            <li><img src="bla3" /></li>             
        </ul>

I'm currently using this code:

jQuery('#s2,#next,#prev').hover( function () {
    jQuery('#next,#prev').animate({opacity: 0.9});
},
function () {
    jQuery('#next,#prev').animate({opacity: 0});
});

This works, but it triggers the animation two times: when you hover over the slider and when you hover over the arrow element (#next or #prev).

How can I make the animation trigger only once?

For an example, please see http://fc.boilerroom.tv/.

Upvotes: 0

Views: 257

Answers (2)

Timothy Aaron
Timothy Aaron

Reputation: 3078

Remove the #next, #prev from your first selection ... leave just jQuery('#s2')

Upvotes: 0

jfriend00
jfriend00

Reputation: 707328

You can remove the #next, #prev from the first selector and use a parent object of the next, prev instead:

jQuery('#container-main .ticker').hover( function () {
    jQuery('#next,#prev').stop(true).animate({opacity: 0.9});
},
function () {
    jQuery('#next,#prev').stop(true).animate({opacity: 0});
});

Note: I also added .stop(true) so it works fine if you go in and out of the hover quickly.

Upvotes: 1

Related Questions