Jquery 将光标悬停在隐藏元素上，不久后将重放隐藏动画

我有两个元素紧挨着，两个元素都是绝对定位的

<div class="vizual">
  <h1 class="typo">...</h1>
  <a href="#" class="typo">...</a>
</div>

它的工作方式应该是，当我将鼠标悬停在两个元素之一上时，第二个元素保持显示。当我把鼠标移出时，过了一段时间它又滑了进去

编辑：如果我将鼠标悬停在其中一个元素上，而第二个元素处于隐藏状态，则它应滑回全宽。但我不能生产太多

问题-它的行为方式也是不需要的： 当我在第二个元素隐藏时，将其中一个元素的悬停在的内部和外部时，它会在隐藏完成后不久再次播放隐藏动画

我尝试了很多不同的“解决方案”（检查元素是否已设置动画，尝试.stop（）它们等等），但我始终无法产生所需的功能。

解释 好的，我已经拟定了我认为你想要的。如果这不是你想要的，希望你或其他人可以从中学习到一些东西。：）

起始布局

用户将鼠标悬停在元素1上，元素2随即弹出并开始滑动'

此时，用户在元素之间悬停，不应进行重置

用户将鼠标悬停在其中一个元素上，在我的示例中是元素1

鼠标已经n秒没有在其中一个元素上移动了，应该像图2中那样滑动。但反过来说

我发现，如果你先概述一下需要做什么，就更容易知道需要做什么

通过这些步骤，我们现在可以定义我们需要什么：

计时器，当

n

秒过去时，检查鼠标在执行“反向动画”的元素之外的时间

MouseIn，MouseOut事件以清除计时器，因此当用户仍悬停其中一个元素时，它不会执行反向动画

我们需要为组的每个实例使用唯一的计时器，我称之为实例化。意思是：我们希望能够在2个元素的1个以上块上执行此操作

解决方案 首先，供您使用（）。希望有足够的评论帮助你度过难关

当然，这是代码

Javascript

//默认变量
var距离=300//二甲苯
变量之间的偏差=10//二甲苯
var MouseOut=550//太太
var AnimationTime=500//太太
var Timers=新数组（）；
$（文档）.ready（函数（）{
//这只是添加默认距离。我没有在CSS中指定它，但是你也可以这样做
$（“div.container div.element_2”）.css（“左”，距离）；
//添加一个带有数字的属性“unique id”，以便计时器可以与元素关联。这是清除计时器所必需的，也是“实例化101”中的基础
$（“div.container”）。每个（函数（索引，父函数）{
$（父）.attr（“唯一id”，索引）；
});
//这里是所有魔术发生的地方
$（“div.container div.element_1，div.container div.element_2”）.mouseenter（函数（e）{
//定义一些局部变量
var parent=$（this.parent（）；
var id=parent.attr（“唯一id”）；
var element1=parent.children（“.element_1”）；
var element2=parent.children（“.element_2”）；
var destination=element1.width（）+BetweenOffset；
//如果element2不可见或正在设置动画，我们将停止它正在执行的任何操作，并开始制作动画
如果（！element2.is（“：visible”）| | element2.is（“：animated”））{
element2.stop（true）.show（）.animate(
{
左：目的地，
不透明度：1
},
动画时间，
“摇摆”
);
}
//然后我们将清除与此家长相关的计时器
计时器[id]=清除超时（计时器[id]）；
}).mouseleave（功能（e）{
var parent=$（this.parent（）；
var id=parent.attr（“唯一id”）；
var element1=parent.children（“.element_1”）；
var element2=parent.children（“.element_2”）；
//这里我们使用匿名函数设置计时器
计时器[id]=设置超时（函数（）{
//仅当它已显示时才设置动画
if（element2.is（“：visible”））{
//停止它正在执行的任何操作并删除动画队列
元素2.停止（真）。设置动画(
{
“左”：距离，
不透明度：0
},
动画时间，
“摇摆”，
函数（）{
//在这里，我们确保它没有被显示
元素2.css（“显示”、“无”）；
}
);
}           
}，鼠尾）；
});
});

HTML

要素1
要素2
要素1
要素2
要素1
要素2
要素1
要素2
要素1
要素2

CSS

.container{
位置：相对位置；
高度：50px；
边缘顶部：20px；
}
.element_1、.element_2{
位置：绝对位置；
高度：50px；
左：0px；
顶部：0px；
}
.要素_1{
边框：1px纯蓝色；
}
.要素2{
边框：1px纯红；
显示：无；
}

工具书类 对我使用的函数的一些引用

最后的想法 我添加了一些很酷的不透明度转换，这不是必需的，但是。。无聊的。 希望这将帮助你的方式，可能有替代我给你的一个，但这是我将如何解决它

编辑

---

经过简短的讨论，OT通知了我他的问题。我看了一下，然后。剩下的唯一问题是，它在已经设置动画时没有设置动画，但这是一个很少有用户注意到的小问题。

如果您在JSFIDLE中复制它，我想

function hoverTransfer(trigger,content){
  var t;
  $(trigger).hover(
    function(){
      clearTimeout(t);
      if ($(content).css("display") == "none") {
        $(content).show('slide', {direction: 'left'}, 500);
      }
    }, function(){
      t = setTimeout(function() {$(content).hide('slide', {direction: 'left'}, 500)}, 550);
  });
  $(content).hover(
    function(){
      clearTimeout(t);
    }, function(){
        t = setTimeout(function() {$(content).hide('slide', {direction: 'left'}, 500)}, 550);
  });
};