Question

I would like to animate an input control border where it changes colour twice using a smooth animation.

What do I need to add to the code below to add another animation to make it change colour again (to say #FF0?).

When I add a second animiation to the code below, jQuery appears to ‘reset’ the border colour rather than smoothly animating.

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

});

Answer 1

There is some bug in jQuery UI library. If you animate borderColor, it doesn’t properly detect old value of border color. However, if you use borderLeftColor, borderTopColor etc., it works correctly. I suggest you to use this code to fix your issue:

$.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