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

Question

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

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

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

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

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

如下图所示，2 个 div 同时悬停，这永远不会发生：

Answer 1

解决方案（由朋友指导）是将单个悬停事件和toggle参数替换为唯一mouseenter和mouseleave事件，这是最终的代码解决方案：

  $('#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');
  });