Question

我有滑动菜单，我使用mouseover和mouseout方法来触发动画。它正在工作但是当经常悬停和鼠标移动时，动画会持续很长时间。如何将其限制为仅在过度和完全动画上。这是我使用的示例代码。

var slide_speed = 400;
$( ".fos-zoom-div" ).mouseover(function() {
    $(this).animate({
        marginTop: "-40px",
        cursor: "pointer"
     }, slide_speed, function() {

     });
});

$( ".fos-zoom-div" ).mouseout(function() {
    $(this).animate({
        marginTop: "0",
        cursor: "pointer"
        }, slide_speed, function() {

        });
});

Answer 1

在开始时，当动画即将触发时，您可以使用jQuery is()方法检查元素是否当前正在设置动画：

$( ".fos-zoom-div" ).mouseover(function() {
   if($(this).is(':animated')){
      return false;
   }
   $(this).animate({
     marginTop: "-40px",
     cursor: "pointer"
     /** ... */

如果元素处于动画状态，则返回false将禁止 new 动画进入队列。

仅限特定事件的Jquery动画

1 个答案: