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