jQuery上的竞赛条件动画/切换/悬停

我发现带有悬停效应的间歇性问题会使一个元素处于与所有其他元素相反的切换状态，但并非每次都会发生

这似乎取决于div网格中的哪个元素是mouseenter/mouseleave的第一个元素：

  $('#portfolio li').hover(function(){
        $(this).find('.info').stop(false, false).animate({
            height: ['toggle', 'swing'],
            opacity: 'toggle'
        }, 300, 'linear');
  });

网格可以位于页面主体中，根据鼠标插入前1或2个div的时间，可以看到“粘性”

（真、真）（真、假）等的不同组合并不能阻止第一个悬停的div变粘（但不是每次）

如下图所示，2个div同时悬停，这是不应该发生的：

解决方案（由朋友提出）是用唯一的

mouseenter

和

mouseleave

事件替换单个悬停事件和

toggle

参数，这是最终的代码解决方案：

  $('#portfolio li').mouseenter(function(){
        $(this).find('.info').not(":animated").stop(true, true).animate({
            height: ['show', 'swing'],
            opacity: '1'
        }, 300, 'linear');
  });

  $('#portfolio li').mouseleave(function(){
        $(this).find('.info').stop(false, true).animate({
            height: ['hide', 'swing'],
            opacity: '0'
        }, 300, 'linear');
  });

解决方案（由一位朋友提出）是用唯一的

mouseenter

和

mouseleave

事件替换单个悬停事件和

toggle

参数，这是最终的代码解决方案：

  $('#portfolio li').mouseenter(function(){
        $(this).find('.info').not(":animated").stop(true, true).animate({
            height: ['show', 'swing'],
            opacity: '1'
        }, 300, 'linear');
  });

  $('#portfolio li').mouseleave(function(){
        $(this).find('.info').stop(false, true).animate({
            height: ['hide', 'swing'],
            opacity: '0'
        }, 300, 'linear');
  });

---

我很难复制这个。你能给出一个具体的例子，说明这个问题是如何发生的吗？或者这（看起来）是完全随机的？如果将光标放在网格的中间，重新加载页面，并在页面加载时在网格上移动鼠标，似乎更容易复制。我很难复制这一点。你能给出一个具体的例子，说明这个问题是如何发生的吗？或者这（看起来）是完全随机的？如果将光标定位在网格的中间，在加载页面的同时重新加载页面并在网格上移动鼠标，似乎更容易复制。