用jQueryUI設置邊框顏色動畫

Question

我有一系列的div，我想用藍色邊框突出顯示，在mouseenter上進行動畫處理，然後在mouseleave上進行。單擊div時，應該保留它的邊框，直到單擊新的div，然後將之前的選擇動畫化回白色邊框。

使用下面的代碼，邊界淡入，但他們不淡出：

$('div').hover(function(){ 
    if (!$(this).hasClass('sel')) { 
    $(this).stop().animate({borderColor:'#0000ff'}, 2000);  
    } 
},function(){ 
    if (!$(this).hasClass('sel')) { 
    $(this).stop().animate({borderColor:'#ffffff'}, 2000); 
    } 
}).click(function(e){ 
    $('.sel').not(this).stop().animate({borderColor:'#ffffff'}, 2000).removeClass('sel'); 
    $(this).addClass('sel'); 
}); 

http://jsfiddle.net/reEsa/

Answer 1

看來，邊境進入白首，然後改到指定的顏色，而不是直接轉換顏色。如果還沒有的話，可以向jQuery提交一個錯誤報告。

我做了一個解決方法，我把div放在父div中，並使填充4模擬邊框。我給父div一個白色的背景，然後動畫父div的背景顏色。我刪除了點擊只是爲了顯示問題的情況。

jsfiddle here

我會在很短的小jQuery插件，即附加在div包裝這個你怎麼稱呼它到該插件創建一個新的div，使其更容易編寫和閱讀時，你實際是在它。

讓我知道如果您有任何問題，我會很樂意嘗試回答它們。