JQuery анимация для парения

Question

Я пытаюсь анимировать логотип, когда вы наводите курсор на элемент привязки. Когда я наводю курсор на логотип, изображение должно идти вверх, а другое вниз, когда первый будет сделан. Когда мышь уходит, она должна быть наоборот, текущий элемент (2-й) должен идти вверх, а когда он уходит, первый элемент должен идти вниз.

Я знаю, как оживить это, однако у меня возникают проблемы, когда я очень быстро зависаю над своим якорным элементом. Иногда оба изображения (1-й и 2-й появляются) и т. Д.

это то, что я уже получил, как мне правильно это сделать?

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);
}

после правильного ответа на мой вопрос мне удалось разобраться со следующим кодом:

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

Вы должны либо позвонить .stop(true, true), прежде чем позвонить .animate() (внутри цепочки), либо вы можете создать какое-то утверждение типа.

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

Это гарантирует, что все анимации останавливаются на brush перед запуском новой. Параметрами .stop() являются «CleartQueue» и «JumpToEnd».

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

Это гарантирует, что .animate() вызывается только в том случае, если в данный момент не выполняется анимация.

Ref .: .stop () , : анимированный