[英].delay() not working when changing background-color of <div>
I am just learning JQUERY and I have been playing around with delay() I wrote a fiddle to show you... What I am trying to do is when a button is clicked, change the background-color of the div and then after a few moments switch the background color again. 我正在学习JQUERY而且我一直在玩延迟()我写了一个小提琴来告诉你...我想要做的是当点击一个按钮时,改变div的背景颜色然后在几分钟再次切换背景颜色。 But when I try it, it just switches to the second color and skips the first. 但是当我尝试它时,它只是切换到第二种颜色并跳过第一种颜色。
HTML: HTML:
<div class = "animation">
</div>
<button id = "change"> Click </button>
Here is the Jquery code: 这是Jquery代码:
$(document).ready(function(){
$("#change").click(function(){
$(".animation").css("background", "blue").delay(700).css("background", "red");
});
});
Here is the link: 链接在这里:
delay
only works for items in the queue (such as animations). delay
仅适用于队列中的项目(例如动画)。
For anything else, use a regular old timer : 除此之外,使用常规旧计时器 :
$("#change").click(function() {
var $el = $(".animation");
$el.css("background", "blue");
setTimeout(function () {
$el.css("background", "red");
}, 700);
});
You can use delay with queue here 你可以在这里使用队列延迟
$(".animation").css("background","blue").delay(700)
.queue(function() {
$(this).css("background", "red").dequeue();
});
Wrap above snippet inside click handler. 在单击处理程序中包裹上面的代码段。
<div id="lock"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');
$("#lock tr").css('background-color','yellow');
$("#lock tr")
.delay(4000)
.queue(function() {
$(this).css("background-color","red").dequeue();
})
.fadeIn();
});
</script>
Try this. 尝试这个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.