如何將點擊的邊框顏色更改爲10秒然後更改回原始?JQuery更改邊框顏色10秒
-8
A
回答
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。
相關問題
- 1. 更改球邊框顏色
- 2. 更改背景顏色更改邊框
- 3. 更改組合框邊框顏色
- 4. 更改複選框的顏色邊框
- 5. 更改複選框邊框顏色
- 6. 如何在RecyclerView中爲TextView更改邊框顏色僅N秒
- 7. 每隔n秒更改邊框的顏色
- 8. 更改CSS顏色每秒
- 9. 如何更改fancybox邊框顏色
- 10. Edittext更改邊框顏色始終onclick
- 11. 如何更改SplitContainer邊框顏色?
- 12. 如何更改GWT TEXTBOX邊框顏色
- 13. 更改UIPopOverController的邊框顏色
- 14. 更改DatePicker的邊框顏色
- 15. Onmouseover DIV,更改圖像邊框顏色
- 16. 更改textField邊框顏色iOS
- 17. 更改斷點語句邊框顏色
- 18. 如何更改iframe邊框的顏色?
- 19. 更改的EditText邊框顏色
- 20. Netbeans更改Diff-view邊框顏色
- 21. Shiny R:更改selectInput的邊框顏色
- 22. 更改UWP窗口邊框顏色?
- 23. 想要更改searchView的邊框顏色
- 24. 更改tr和td的邊框顏色
- 25. 如何更改QTableView邊框顏色?
- 26. 邊框動畫不會更改顏色
- 27. 如何更改colorbox的邊框顏色
- 28. 如何更改UIPopoverController的邊框顏色?
- 29. 如何更改toolstripmenuitem邊框顏色?
- 30. VB更改顏色邊框菜單條
在按鈕上綁定單擊事件。在處理程序更改邊框顏色。 'setTimeout'用10秒重置邊框顏色。 – Tushar
請輸入您的html – 2017-04-20 07:34:37
您到目前爲止嘗試過什麼? –