Disable hover until animation is complete

Question

My Attempt, any suggestions?

    var animating = false,
        $header = $('#header'),
        $titles = $header.find('span'),
        $blurSlider = $('.site-blur-slider'),
        $blurCopy = $blurSlider.find('.active .copy'),
        $blurControls = $blurSlider.find('.controls');

    $header.mouseover(function() {
        if(!animating) {
            $blurSlider.stop().animate({ width : 670 });
            $blurCopy.stop().animate({left: 367});
            $blurControls.stop().animate({left: 440});
            $(this).stop().animate({width : 310}, function() {
                $titles.fadeIn(200);
                animating = true;
            });
        }

    }); 

    $header.mouseout(function() {
        $this = $(this);

        $titles.stop().fadeOut(50, function() {
            $this.animate({ width : 120 });
            $blurSlider.animate({ width : 440}, function() {
                animating = false;
            });
            $blurCopy.animate({left: 157});
            $blurControls.animate({left: 230});
        });

    }); 

This is glitchy.

Answer 1

You note that you "want all those animations to finish before the user decides to try and run them again". This requires some kind of blocking mechanism that will prevent the user from taking further action until each animation completes. Mouse hover events are not a good mechanism to enforce this. What you need is something like a switch.

Here are a couple fiddles. The first offers a slightly simplified version of the code from your question to better illustrate the problem:

http://jsfiddle.net/klenwell/q9s5voe3/2/

The second fiddle refactors the code in the first to use promises and a "switch" button to better control the state of the interface:

http://jsfiddle.net/klenwell/q9s5voe3/

The button does a couple things:

1. It indicates the current state of the interface
2. It blocks the user from further action until each animation completes

Here's the heart of the switch code:

$switch.on('click', function() {
    if ($switch.text() == 'mouseover') {
        $switch.prop('disabled', true).text('animating...');
        var animationComplete = mouseOverAnimation();
        $.when(animationComplete).then(function() {
            $switch.prop('disabled', false).text('mouseout');
        }); 
    }
    else if ($switch.text() == 'mouseout') {
        $switch.prop('disabled', true).text('animating...');
        var animationComplete = mouseOutAnimation();
        $.when(animationComplete).then(function() {
            $switch.prop('disabled', false).text('mouseover');
        }); 
    }
    else {
        console.warn('animation in progress');
    }
});

It's not a solution to a your problem but I hope it will help lead you to one.

Answer 2

I fixed it on my own, had to create a mouseout on another object which is next to it in order for the effects to run smoothly, also I added an open class to the object which will be hovered over.

updated code here:

    var animating = false,
        $blurSlider = $('.site-blur-slider'),
        $blurCopy = $blurSlider.find('.copy'),
        $blurControls = $blurSlider.find('.controlscontainer');

        $header.mouseover(function() {
            $(this).addClass('opened');
            if($(this).hasClass('opened') && !animating) {
                $(this).stop(true, true).animate({width : 310}, function() {
                    $titles.fadeIn(200);
                    animating = true;
                    $('#boxlogo').fadeOut('fast');
                    $('#fulllogo').fadeIn('fast');
                });
                $blurSlider.stop(true, true).animate({ width : 670 });
                $blurCopy.stop(true, true).animate({width: 600});
                $blurControls.stop(true, true).animate({width: 540});
            }



        }); 

        $('#blurslider').mouseover(function() {
            if($header.hasClass('opened')) {
                $header.removeClass('opened');
                $titles.delay(10000).fadeOut(50, function() {
                    animating = false;
                    $header.stop(true, true).animate({ width : 120 });
                    $blurSlider.stop(true, true).animate({ width : 440});
                    $blurCopy.stop(true, true).animate({width: 394});
                    $blurControls.stop(true, true).animate({width: 330});
                });
                    $('#boxlogo').fadeIn('fast');
                    $('#fulllogo').fadeOut('fast');
            }

        });