使用jQueryUI为borderColor设置动画

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

看起来边框首先变为白色，然后变为指定的颜色，而不是直接变为颜色。如果尚未提交错误报告，可能会提交错误报告。

我做了一个解决方法，我将div放在父div中，并使填充4模拟边框。我给父div一个白色背景，然后动画父div的背景颜色。我删除了点击只是为了显示问题案例。

jsfiddle here

我会将它包装在一个简短的小jQuery插件中，它将你调用它的div附加到插件创建的新div上，以便在实际应用它时更容易编码和读取。

如果您有任何问题，请告诉我，我将很乐意尝试回答。