Объяснение
Хорошо, я составил то, что, как вы думаете, вы просите.Если это не то, о чем вы просили, надеюсь, вы или кто-то еще узнаете что-то из этого.:) 
- Начальный макет
- Пользователь наводит курсор на элемент 1, после чего элемент 2 выскакивает и начинает скользить
- В этот момент пользователь наводит курсор на элементмежду элементами, и не должно произойти сброса
- Пользователь наводит курсор на один из элементов, в моем примере, элемент 1
- Мышь не была над одним из элементов в течение n секунд и должнаскользите как в 2. но в обратном направлении.
Мне легче узнать, что нужно сделать, если вы сначала набросаете, что нужно.
Пройдя по шагам, мы можем теперьОпределите, что нам нужно:
- Таймер, который проверяет, как долго мышь находилась вне элементов, которые выполняют «обратную анимацию», когда
n секунды прошли события - MouseIn, MouseOut дляочистите таймер, чтобы он не выполнял обратную анимацию, пока пользователь все еще держит один из элементов
- Нам нужны уникальные таймеры для каждого экземпляра группы, который я называю созданием экземпляра.Значение: мы хотим иметь возможность сделать это на более чем 1 блоке из 2 элементов
Решение
Во-первых, вот вам JSFiddle для игрывокруг с ( вот один без комментариев ).Надеюсь, у вас будет достаточно комментариев, чтобы помочь вам пройти через это.
И, конечно, вот код.
Javascript
//default variables
var Distance = 300; //px
var BetweenOffset = 10; //px
var MouseOut = 550; //ms
var AnimationTime = 500; //ms
var Timers = new Array();
$(document).ready(function(){
//this is just to add the default distance. I didn't specify it in the CSS, but you can do it just as well
$("div.container div.element_2").css("left", Distance);
//adds an attribute "unique-id" with a number, so that the timer can be associated with an element. This is necessary to be able to clear the timer, and is the basics in "instantiation 101"
$("div.container").each(function(index, parent){
$(parent).attr("unique-id", index);
});
//here's were all the magic happens
$("div.container div.element_1, div.container div.element_2").mouseenter(function(e){
//define some local variables
var parent = $(this).parent();
var id = parent.attr("unique-id");
var element1 = parent.children(".element_1");
var element2 = parent.children(".element_2");
var destination = element1.width()+BetweenOffset;
//if element2 isn't visible or is being animated, we're going to stop whatever it's doing and do a beginning animation
if(!element2.is(":visible") || element2.is(":animated") ){
element2.stop(true).show().animate(
{
left: destination,
opacity: 1
},
AnimationTime,
"swing"
);
}
//then we're gonna clear the timer associated with this parent
Timers[id]= clearTimeout(Timers[id]);
}).mouseleave(function(e){
var parent = $(this).parent();
var id = parent.attr("unique-id");
var element1 = parent.children(".element_1");
var element2 = parent.children(".element_2");
//here we set the timer using an anonymous function
Timers[id] = setTimeout(function(){
//Only animate if it's already showing
if(element2.is(":visible")){
//stop whatever it's doing and remove the animation queue
element2.stop(true).animate(
{
"left": Distance,
opacity: 0
},
AnimationTime,
"swing",
function(){
//here we make sure it's not being displayed
element2.css("display", "none");
}
);
}
}, MouseOut);
});
});
HTML
<div class="container">
<div class='element_1'>Element 1</div>
<div class='element_2'>Element 2</div>
</div>
<div class="container">
<div class='element_1'>Element 1</div>
<div class='element_2'>Element 2</div>
</div>
<div class="container">
<div class='element_1'>Element 1</div>
<div class='element_2'>Element 2</div>
</div>
<div class="container">
<div class='element_1'>Element 1</div>
<div class='element_2'>Element 2</div>
</div>
<div class="container">
<div class='element_1'>Element 1</div>
<div class='element_2'>Element 2</div>
</div>
CSS
.container{
position: relative;
height: 50px;
margin-top: 20px;
}
.element_1, .element_2{
position: absolute;
height: 50px;
left: 0px;
top: 0px;
}
.element_1{
border: 1px solid blue;
}
.element_2{
border: 1px solid red;
display: none;
}
Ссылки
Некоторые ссылки на используемые мной функции
Заключительные мысли
Я добавил несколько классных переходов непрозрачности, не обязательно, но .. Мех.Надеюсь, это поможет вам на вашем пути, могут быть альтернативы тому, который я вам дал, но вот как я это решу.
Редактировать
После краткого обсуждения,ОТ уведомил меня о своем JSFiddle.Я посмотрел на это, и это то, что я получил .Единственная проблема, которая остается, заключается в том, что он не анимируется, пока он уже анимируется, но это небольшая проблема, которую замечают не многие пользователи.