Выпуск анимации DIV (x2)

Question

Вопрос из двух частей:)

У меня установлен DIV (с именем два) вне другого DIV (с именем один). Когда я наводю курсор на «один», я хочу, чтобы «два» скользнуло в него. Это работает, используя код ниже

    $(function(){ 
$(".one").mouseover(function(){
    $(".two").animate({left:-0}, 100);
});
});

Когда я использую тот же код, но переворачиваю анимацию с помощью «mouseout», она мигает дважды как на входной, так и на выходной анимации. Как это можно исправить?

    $(function(){ 
$(".one").mouseout(function(){
    $(".two").animate({left:-120}, 100);
});
});

Вторая часть вопроса заключается в том, как настроить это для нескольких экземпляров на одной странице без необходимости каждый раз создавать уникальный код и имена DIV.

Answer 1

Чтобы избежать запуска нескольких анимаций, вы должны stop () элемент перед вызовом нового animate()

$(function(){ 
    $(".one").mouseout(function(){
        $(".two").stop(true, true).animate({left:-120}, 100);
    });
});

Если хотите, посмотрите в документах о stopпрыгнуть в конце или начать с того места, где он остановился.

Для того, чтобы иметь несколько экземпляров, вы должны вместо этого сделать плагин jQuery.Если второй div находится непосредственно в первом, и нет другого div, вы можете вызвать свой плагин следующим образом:

$('div.your_div_parent').doMyFunc();

И в вашей функции вы добавите событие в $(this, '>div');

Я не могу быть более точным, потому что мне не хватает вашего кода, и я не уверен в том, что именно вам нужно в отношении вашего последнего пункта.