Question

我想设置一个输入控件边框，使用平滑动画将其颜色改变两次。

我需要在下面的代码中添加什么来添加另一个动画才能让它再次改变颜色（比如＃FF0？）。

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

$（'＃searchinput'）。click（function（）{ $（'＃searchinput'）。animate（{borderColor：'＃36C'}，400）

}）;

Answer 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

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

1 个答案: