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. But when I try it, it just switches to the second color and skips the first.
HTML:
<div class = "animation">
</div>
<button id = "change"> Click </button>
Here is the Jquery code:
$(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).
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.