JQuery更改边框颜色10秒

Question

如何将点击的边框颜色更改为10秒然后更改回原始？

Answer 1

为此使用setTimeout。

$(document).ready(function() { 
 
    var timer; 
 

 
    $('div').click(function() { 
 
    // cancel previous timeout 
 
    clearTimeout(timer); 
 
    var self = $(this); 
 
    
 
    // set new border collor. Or add new class for CSS integration 
 
    self.css('border-color', 'green'); 
 

 
    timer = setTimeout(function() { 
 
     // reset CSS 
 
     self.css('border-color', ''); 
 
    }, 5000); // time in miliseconds, so 5s = 5000ms 
 
    }); 
 
});

div { 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Answer 2

你可以试试这个解决方案？ :)

$("#button").on("click", function(){ 
    elem = $(this); 
    elem.css('border-color', 'blue'); 
    setTimeout(function(){ 
     elem.css('border-color', 'red'); }, 
     10000); 
}); 

Answer 3

我想你需要尝试这样

$('#btn').click(function() { 
     $(this).css('border-color', '#fff'); 
     setTimeout(function() { 
      $('#btn').css('border-color', '#000'); 
     },10000); 
    }); 

Answer 4

如果你想使用jQuery做这样的事情：

$(".test").click(function(){ 
 
    $(this).animate({"border-color":"#fff"}).delay(1000).animate({"border-color":"#c00"}); 
 
});

.test { 
 
    width: 100px; 
 
    height: 20px; 
 
    color:#fff; 
 
    text-align: center; 
 
    background: #333; 
 
    border: 5px solid #c00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="test">Test</div>

请注意你无法单独使用jQuery来做 - 因为animate不能使用颜色。所以你需要添加jQuery UI来扩展jQuery。