说明
好的，我已经拟定了我认为您所要求的内容。如果这不是您所要求的，希望您或其他人可以从中学到一些东西。 :)
- 开始布局
- 用户将鼠标悬停在元素 1 上，元素 2 随即弹出并开始滑动
- 此时，用户在元素之间悬停，不应发生重置
- 用户从其中一个元素（在我的示例中为元素 1）悬停在外面
- 鼠标未在其中一个元素上停留 n 秒，应该像在 2 中一样滑动。但反向。
我发现如果你先概述需要做什么，就更容易知道需要做什么。
通过这些步骤，我们现在可以定义我们需要什么：
- 当
n 秒过去时，检查鼠标在执行“反向动画”的元素之外多长时间的计时器
- MouseIn、MouseOut 事件清除计时器，因此当用户仍悬停其中一个元素时它不会执行反向动画
- 我们需要为每个组实例设置唯一的计时器，我称之为实例化。含义：我们希望能够在超过 1 个包含 2 个元素的块上执行此操作
解决方案
首先，here's a JSFiddle 供您使用 (here's one without comments)。希望有足够多的 cmets 帮助您度过难关。
当然，这是代码。
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;
}
参考文献
对我使用的函数的一些参考
最后的想法
我添加了一些很酷的不透明度过渡，这不是必需的，但是……嗯。
希望这会对您有所帮助，可能有替代我给您的方法，但这是我的解决方法。
编辑
经过简短讨论后，OT 通知了我他的 JSFiddle。我看了看，this is what I got。剩下的唯一问题是它在动画时没有动画，但这是一个没有多少用户注意到的小问题。