Using jQuery hover() to make element appear but not triggering animation twice
<p>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.</p>

<p>The HTML for the slider:</p>

<pre><code>        &lt;div id="next"&gt;&lt;/div&gt;
        &lt;div id="prev"&gt;&lt;/div&gt;

        &lt;ul id="s2"&gt;            
            &lt;li&gt;&lt;img src="bla1" /&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;img src="bla2" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="bla3" /&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;img src="bla3" /&gt;&lt;/li&gt;             
        &lt;/ul&gt;
</code></pre>

<p>I'm currently using this code:</p>

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

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

<p>How can I make the animation trigger only once?</p>

<p>For an example, please see <a href="http://fc.boilerroom.tv/" rel="nofollow">http://fc.boilerroom.tv/</a>.</p>
