入力コントロールの境界線の色を滑らかにアニメートする方法 - 2回

Question

滑らかなアニメーションを使用して色を2回変更する入力コントロールの境界線をアニメーション化したいと思います。

もう一度色を変更するアニメーションを追加するには、以下のコードに何を追加する必要がありますか（＃FF0？）。

下のコードに2番目のアニメーションを追加すると、jQueryはスムーズにアニメーション化するのではなく、境界の色をリセットするように見えます。

$（ '＃1 searchinput'）をクリックします。（関数（）{ $（ '＃1 searchinput'）はアニメーション（{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