jQuery clearInterval on slideToggle

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.

Answer 2

Add this event at the end of your script:

$('#portRibbon').mouseout(function(){
    $('#text3').animate({duration:0});
});

Check this example: http://jsfiddle.net/saidbakr/g7AyV/1/

From Jquery Api:

Additional Notes:

All jQuery effects, including .animate(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.

Answer 3

You're using an interval set to zero to run an animation?

The animation will run thousands of times every second screwing up your browser, and there should'nt be any need for interval function at all, but it should probably be more like this:

var timer;

$('#portRibbon').on({
    mouseenter: function() {
        $('#text3').stop(true,true).css('top', '0px');
        $('#portDescription').slideDown(500, function() {
            $('#text3').animate({
                'top': '-35px'
            }, 6000).delay(1000).animate({
                'top': '0px'
            });
        });
    },
    mouseleave: function() {
        $('#portDescription').slideUp(500);
    }
});

​FIDDLE