Question

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

Answer 1

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.