如何平滑地为输入控件边框颜色设置动画 - 两次

【问题标题】：How to animate input control border color smoothly - twice如何平滑地为输入控件边框颜色设置动画 - 两次
【发布时间】：2012-05-09 10:14:31
【问题描述】：

我想为输入控件边框设置动画，在该边框使用平滑动画两次更改颜色。

我需要在下面的代码中添加什么来添加另一个动画以使其再次改变颜色（比如说#FF0？）。

当我在下面的代码中添加第二个动画时，jQuery 似乎“重置”了边框颜色而不是平滑动画。

$('#searchinput').click(function() { $('#searchinput').animate({borderColor: '#36C'}, 400)

});

【问题讨论】：

你在使用一些 jQuery 插件吗？

标签： jquery animation colors border jquery-animate

【解决方案1】：

jQuery UI 库中存在一些错误。如果您为borderColor 设置动画，它不会正确检测边框颜色的旧值。但是，如果您使用borderLeftColor、borderTopColor 等，它可以正常工作。我建议您使用此代码来解决您的问题：

$.fn.border_color_animate = function(color, time, callback) {
  var obj = {};
  $(["Left", "Right", "Top", "Bottom"]).each(function() {
   obj["border"+this+"Color"] = color;
  });
  this.animate(obj, time, callback);
};

$('#searchinput').click(function() {
  $('#searchinput').border_color_animate('#36C', 400, function() {
    $('#searchinput').border_color_animate('#f00',400);
  });
});

Live example

【讨论】：

您好 Riacheche，非常感谢您提供此解决方案 - 效果很好。干杯！