0

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

別のアニメーションを追加して色を再び変更するには、以下のコードに何を追加する必要がありますか (つまり #FF0?)。

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

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

});

4

1 に答える 1

1

jQueryUIライブラリにいくつかのバグがあります。アニメーション化する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 に答える