使用jQueryUI为borderColor设置动画

我有一系列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在这里

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

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