Question

How stop fadein and fadeout animation when mouse enter in jquery?
I have a code like this

function fadeItIn() {
    $('.banner_outer1').fadeIn(time, function () {
       $('.banner_outer1').mouseenter(function(){
           //stop animation
           });
       $('.banner_outer1').mouseout(function(){
           //start animation
           });     
        setTimeout(fadeItOut, 1400);
       //fadeItOut();
    });
}

function fadeItOut() {
    $('.banner_outer1').fadeOut(time, function () {
        $('.banner_outer1').html(banner_outer2);
        banner_outer3 = banner_outer2;
        banner_outer2 = banner_outer1;
        banner_outer1 = banner_outer3;
        fadeItIn();
    });
}

I want to stop animation when mouse enter to the div and resume animation when mouse leave the div. How can i do in jquery?

Answer 1

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function bind()
        {
            $('.fader').bind('fade-cycle', function() {
                $(this).fadeOut('fast', function() {
                    $(this).fadeIn('fast', function() {
                        $(this).trigger('fade-cycle');
                    });
                });
            });
        }
        bind(); // binding fade-cycle trigger to .fader
        $('.fader').trigger('fade-cycle'); // starting animation by triggering fade-cycle event

        $('.fader').mouseover(function(){
            $('.fader').unbind('fade-cycle'); // stopping animation by unbinding the fade-cyle
        });
        $('.fader').mouseout(function(){
            // restart animation by rebinding and triggering the fade-cycle event
            bind();
            $(this).trigger('fade-cycle');
        });
    });
</script>

<div class="fader">
    paste your content here that you want to animate (fadein & fadeout continuously)
</div>