jquery - highlight text box border color for few seconds?

Question

Hi i want to highlight a text box border color for few seconds , afterwards i want to change it back to white color. is ther a way for addClass function to specify time also. Any other way ?tried with http://jsfiddle.net/RW2s4/7/ not working

Answer 1

この小さなスクリプトは、クラス「ハイライト」を 2 秒間入力フィールドに追加します。

$('#text').change(function() {
    var jElement = $(this);
    jElement.addClass('highlight');
    setTimeout(
        function() { jElement.removeClass('highlight'); },
        2000
    );
});

この例も参照してください。

または、ここであなたと私のソリューションの組み合わせ。

Answer 2

switchClass次のようなものを使用できます。

$("#element").switchClass("removeThisClass", "addThisClass", 1000)

デモ フィドル:こちら

参考：JQueryドキュメント

Answer 3

div へのスライドをクリックして div を強調表示する

$('.box').click(function() {
    var jElement = $(this);
    jElement.addClass('highlight');
    setTimeout(
        function() { jElement.removeClass('highlight'); }, 
        500
    );
    //$(window).scrollTop($('.box3').offset().top,100);
    $("html, body").delay(100).animate({
        scrollTop: $('.box2').offset().top 
    }, 2000);

});


    <button>http://jsfiddle.net/tyPct/198/    </button>

Answer 4

ライブ デモを見る

$(function(){

  setTimeout(ChangeBorder, 2000);

  function ChangeBorder() {
     $(".highlight").css({"border-color":"red"});
  }
});

Answer 5

一定の間隔で要素をアニメーション化する jquery animate 関数を確認してください:
http://api.jquery.com/animate/

デモ: http://jsfiddle.net/umSkg/2/

$(document).ready(function(){
    var ogColor = $("#inpt").css("border-left-color");
    $("#trggr").click(function(){
        var inpt = $("#inpt");
        var delay = 1000;
        inpt.animate({ borderColor: "#EAC117" }, delay,function(){
        //revert after completing
        inpt.animate({ borderColor: ogColor }, delay);
        });
    });

});

Answer 6

エフェクト機能を使う

$('#component').effect("highlight", {color: 'red'}, 2000);