Question

I’m trying to animate a logo when you hover over the anchor element. When I hover over the logo, an image needs to go upwards and another one downwards when the first one is done. When the mouse leaves it should the other way around, the current element (2nd) should go upwards and when it’s gone the first element should go downwards.

I know how to animate this, however I’m having troubles when I hover really fast above my anchor element. Sometimes both images (1st & 2nd appear) etc.

this is what I already got, how should I do this properly?

function logoAnimation() {
var logo = jQuery('#logo a');
var house = jQuery('#logo_icon_house');
var brush = jQuery('#logo_icon_brush');

var inHandler = function () {
    logo.unbind('mouseleave', outHandler);
    brush.animate({
        "top": "-27px"
    }, 250, function(){
        house.animate({
            "top": "42px"
        }, 250,function(){
            logo.bind('mouseleave', outHandler);
        });
    }
    );
}
var outHandler = function () {
    logo.unbind('mouseenter', inHandler);
    house.animate({
        "top": "-21px"
    }, 250, function () {
        brush.animate({
            "top": "39px"
        }, 250,function(){
            logo.bind('mouseenter', inHandler);
        });
    });
}

logo.mouseenter(inHandler).mouseleave(outHandler);
}

after the correct answer to my question, I managed to work this out with the following code:

function logoAnimation() {
var logo = jQuery('#logo a');
var house = jQuery('#logo_icon_house');
var brush = jQuery('#logo_icon_brush');

var inHandler = function () {
    if(brush.is(':animated')) {
        return;
    }
    brush.stop(true,true).animate({
        "top": "-27px"
    }, 250, function(){
        if(house.is(':animated')) {
            return;
        }
        house.animate({
            "top": "42px"
        }, 250);
    }
    );
}
var outHandler = function () {
    house.stop(true,true).animate({
        "top": "-21px"
    }, 250, function () {
        if(brush.is(':animated')) {
            return;
        }
        brush.animate({
            "top": "39px"
        }, 250);
    });
}

logo.mouseenter(inHandler).mouseleave(outHandler);
}

Answer 1

You either should call .stop(true, true) before you call .animate() (within the chain) or you could create some statement like.

brush.stop(true, true).animate({}); // ...

That makes sure all animations are stopped on brush before starting a new one. The parameters of .stop() are “CleartQueue” and “JumpToEnd”.

if(!brush.is(':animated')) {}

That makes sure, .animate() only gets called if no animation currently is going on.

Ref.: .stop(), :animated