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

Posted 2023-05-08

【中文标题】jQuery动画/切换/悬停的竞争条件

【英文标题】：Race condition on jQuery animate / toggle / hover

【发布时间】：2013-11-17 13:38:20

【问题描述】：

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

这似乎取决于 div 网格中的哪个元素首先是 mouseenter/mouseleave'd：

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

网格可以是页面正文中的seen here，其“粘性”取决于鼠标输入前 1 或 2 个 div 的时间。

(true,true) (true, false) 等的不同组合并不能阻止第一个悬停的 div 变得粘滞（但不是每次都如此）。

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

【问题讨论】：

我很难复制这个。你能给出一个没有失败的问题发生的具体例子吗？还是这（似乎）完全随机？

如果将光标定位在网格的中间，重新加载页面并在页面加载时在网格周围移动鼠标似乎更容易重现。

【参考方案1】：

解决方案（由朋友提出）是用唯一的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');
  );