使用 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 中，以便在您实际应用它时更容易编码和阅读。

如果您有任何问题，请告诉我，我很乐意为您解答。