2017-04-20 84 views
-8

如何將點擊的邊框顏色更改爲10秒然後更改回原始?JQuery更改邊框顏色10秒

+2

在按鈕上綁定單擊事件。在處理程序更改邊框顏色。 'setTimeout'用10秒重置邊框顏色。 – Tushar

+0

請輸入您的html – 2017-04-20 07:34:37

+0

您到目前爲止嘗試過什麼? –

回答

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>

1

你可以試試這個解決方案? :)

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

我想你需要嘗試這樣

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

'setTimeout'內的'$(this)'不會顯示爲'div',而是自己運行。 – Justinas

0

如果你想使用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。