用jQueryUI动画borderColor [英] Animating a borderColor with jQueryUI

问题描述

我要用蓝色边框突出显示一系列的div，在mouseenter上设置动画效果，在mouseleave上设置动画效果.单击一个div时，它应保留其边框，直到单击一个新的div，然后再将先前选择的动画设置为白色边框.

I have a series of div's that I want to highlight with a blue border, animating in on mouseenter, and out on mouseleave. When a div is clicked, it should retain it's border until a new div is clicked, which then animates the previous selection back to a white border.

使用以下代码，边框会淡入，但边框不会淡出:

Using the following code, the borders fade in, but they don't fade out:

$('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/

推荐答案

似乎边框首先变为白色，然后变为指定的颜色，而不是直接变为该颜色.也许还没有提交一个错误报告给jQuery.

It appears that the border goes to white first, and then changes to the specified color, rather than going to the color directly. Maybe submit a bug report to jQuery if it has not been already.

我做了一个变通方法，将div放在父div内，并使用填充4来模拟边框.我给父div设置了白色背景，然后对父div的背景色进行了动画处理.我删除了单击只是为了显示问题情况.

I did a workaround where I placed the divs inside a parent div, and made the padding 4 to simulate the border. I gave the parent div a white background, then animated the background color of the parent div. I removed the clicking just to show the problem case.

jsfiddle此处

我会将其包装在一个简短的jQuery小插件中，该插件将您调用的div附加到该插件创建的新div上，以使其在实际应用时更易于编码和阅读.

I would wrap this in a short little jQuery plugin, that appends the div you call it on to a new div that the plugin creates to make it easier to code and read when you are actually applying it.

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

Let me know if you have any questions and I will be happy to try to answer them.

这篇关于用jQueryUI动画borderColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！