Javascript 如何防止鼠标左右抖动

我目前正在尝试开发一个项目列表，它在mouseenter/leave上触发一个函数。当前，在鼠标上输入背景块，将其滑出右侧视图，在鼠标上离开背景块，将其滑回视图。这就像预期的一样，但当我多次进出时，动画就会触发并快速旋转，从而失去我试图实现的平滑滚动效果。我该如何避免这种急促，我已经尝试添加了一个“disable”类，但这似乎不起作用。任何和所有的建议都会有帮助

jqueryv1:

  project.mouseenter(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).addClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
    }
  });
  project.mouseleave(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).removeClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
    }
  });

  project.hover(function() {
    var colourDuration = 750, colourDelay = 550;
    $(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
    $(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
    $(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
  }, function() {
    $(this).find('.colour-block').velocity('stop').velocity('reverse');
    $(this).find('p').velocity('stop').velocity('reverse');
    $(this).find('button').velocity('stop').velocity('reverse');
  });

jqueryv2:

  project.mouseenter(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).addClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
    }
  });
  project.mouseleave(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).removeClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
    }
  });

  project.hover(function() {
    var colourDuration = 750, colourDelay = 550;
    $(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
    $(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
    $(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
  }, function() {
    $(this).find('.colour-block').velocity('stop').velocity('reverse');
    $(this).find('p').velocity('stop').velocity('reverse');
    $(this).find('button').velocity('stop').velocity('reverse');
  });

Velocity JS

http://velocityjs.org/

屏幕截图：

  project.mouseenter(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).addClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
    }
  });
  project.mouseleave(function() {
    var project = $(this).hasClass('disable');
    if(!project){
      var colourDuration = 750, colourDelay = 550;
      $(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
        $(this).removeClass('disable');
      }});
      $(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
      $(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
    }
  });

  project.hover(function() {
    var colourDuration = 750, colourDelay = 550;
    $(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
    $(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
    $(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
  }, function() {
    $(this).find('.colour-block').velocity('stop').velocity('reverse');
    $(this).find('p').velocity('stop').velocity('reverse');
    $(this).find('button').velocity('stop').velocity('reverse');
  });

---

你能创建一个提琴，让我们看到问题所在吗？代码本身并不能帮助你想象实际的问题，在我的电脑上使用Chrome运行良好。。。如果添加事件处理程序，请确保只添加一次它们-我认为这可能会每次添加一个：$（this）.find（'.color block'）.stop（true，false）。速度（…）也许-请为我使用最新的镀铬背面精品