0

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

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

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

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

});

4

1 回答 1

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);
  });
});

活生生的例子

于 2012-04-29T11:16:28.703 回答