jquery - 高亮文本框边框颜色几秒钟？

Question

嗨，我想突出显示文本框边框颜色几秒钟，然后我想将其改回白色。addClass 函数是否也可以指定时间。任何其他方式？尝试使用http://jsfiddle.net/RW2s4/7/不起作用

Answer 1

这个小脚本在输入字段中添加了两秒钟的“highlight”类：

$('#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);