jquery重置边框动画

Question

我有一个带有 1px 实心边框的 div。我想用 jquery 给它一个边框颜色动画。这是我的代码；

//Products border motion
jQuery(".products-two").mouseenter(
    function(){
        jQuery(this).stop(true,true).animate({borderColor: '#999999'},400);
    }).mouseleave(
    function(){
        jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6'}, 800);
    }
    );

我还从 ; 导入 ui 类

http://ajax.googleapis.com/ajax/libs/jqueryui /1.8/jquery-ui.js

我的问题是；

当 mouseleave 函数起作用时，它首先删除边框，然后更改边框颜色。这并不能提供平滑的运动。我应该怎么办？

更新 - 我还更改了运动时间，现在意识到当鼠标进入时也会发生这种情况。它首先删除边框，然后添加边框并更改其颜色。

解决方案 - 由于我无法回答我的问题，我想与其他可能感兴趣的人分享解决方案。

我猜这是关于 jquery ui 类的错误。因为当我使用具有默认边框属性的常规 jquery 库时，它可以工作。我跳过了这个 ui 方法并将其用作临时解决方案。

//Products border motion
    jQuery(".products-two").mouseenter(
    function(){
        jQuery(this).stop().animate({borderTopColor:'#999999', borderBottomColor:'#999999',borderLeftColor:'#999999',borderRightColor:'#999999'},400);
    }).mouseleave(
    function(){
        jQuery(this).stop().animate({borderTopColor:'#E6E6E6', borderBottomColor:'#E6E6E6',borderLeftColor:'#E6E6E6',borderRightColor:'#E6E6E6'},400);
    }
    );

Answer 1

您需要防止动画排队。

jQuery(".products-two").mouseenter(
    function(){
        jQuery(this).stop(true,true).animate({borderColor: '#999999'},400);
    }).mouseleave(
    function(){
        jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6', queue: false}, 800);
    }
    );