jQuery animate / toggle / hover上的竞争条件

Question

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

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

  $('#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变得粘滞（但不是每次都）。< / p>

如下图所示，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');
  });