Question

我有3个大盒子菜单。当我将鼠标移动到1个盒子上时，我改变背景并且工作但是如果快速移动鼠标，则背景不会返回到原始状态。我认为问题可能是动画的速度。如果我在动画的速度上使用“快”而不是“慢”它可以工作，但效果太快。

您可以更好地查看问题here

我正在为每个方框使用此代码：

   $('#box-orange').hover( function(){        
      $(this).animate({ backgroundColor: "#E9902C" }, "slow");
   },
   function(){  
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

   $('#box-pink').hover( function(){          
      $(this).animate({ backgroundColor: "#DD2D77" }, "slow");
   },
   function(){           
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

   $('#box-blue').hover( function(){          
      $(this).animate({ backgroundColor: "#29A8DC" }, "slow");
   },
   function(){           
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

有没有办法让盒子搞砸了？

Answer 1

请参阅my edit了解修复方法。

我添加了jQuery Colour plugin以获得更流畅的彩色动画，然后在mouseout上将背景颜色更改为transparent，而不是将背景更改为none。

真正的问题是，如果你在元素上方盘旋然后在动画完成之前离开元素，那么mouseon动画仍在运行，因此mouseout删除背景的事件不会成为永久性的。要解决此问题，只需将.stop()添加到正在设置动画的元素中。

JQuery动画速度问题有背景

1 个答案: