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.

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

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