Question

I have a div that when hovered over, slideToggles a <p> tag to become visible and then I activate a setInterval to animate the visible <p> tag, when the user no longer hovers on the div the <p> tags becomes hidden like it should but the animation still continues to run. I have tried everything I can think of to stop the animation when you users no longer hovers, but I am new to jQuery and I have been unsuccessful.

Here is the fiddle to show you what I have, http://jsfiddle.net/Yokocapolo/g7AyV/

I would like the <p> tag to go back the start when it is no longer being hovered over and for the animation to start again when the user hovers back on the div.

Thank you for any help.

Answer 1

I managed to get it to work by adding the span on hover and then removing it on mouseleave.

I stored the span and the text node as a variable then using the append() I appended it to the p tag. When the user moved off I used remove() to remove the variable on mouseleave.

To see it working click the fiddle. http://jsfiddle.net/Yokocapolo/g7AyV/7/

Thanks again to those who answered my question.