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

您需要登录到prevent the animation from queueing。

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