如何防止鼠标进入/离开时的急动

Question

我目前正在尝试开发一个项目列表，这些项目在mouseenter / leave中触发一个函数。目前在鼠标上输入背景块滑动到右侧视图，鼠标离开后背景块滑回视图。这可以按预期工作，但是当我多次进入和离开时，动画会触发并晃动 - 失去我想要实现的平滑滚动效果。我如何防止抽搐，我尝试添加'禁用'类，但这似乎不起作用。任何和所有建议都会有所帮助。

jQuery V1：

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

jQuery V2：

http://velocityjs.org/

Velocity JS

<div id="Payments">
  <h1 rv-text="data.title"></h1>

  <div class="col-md-4">
            <select rv-value="data.selectedVal" class="form-control">
                <option value="0" selected></option>
                <option rv-each-country="data.countries" rv-value="country.id" rv-text="country.name"></option>
            </select>
        </div>

    <div class="container" style="padding-top:40px;">    
        <div class="row">
            <table class="table .table-responsive table-hover">
                <tbody>
                    <tr rv-each-product="data.products" data-show="data.selectedVal | eq product.id" >
                        <td rv-text="product.title" ></td>
                        <td rv-text="product.id"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

截图：