Why doesn't the following work? How do I click an element, hide it for a bit, and then show it? http://jsfiddle.net/ba8bJ/
$('#myButton').click(function() {$(this).hide().delay(800).show()});
Add a comment
|
4 Answers
hide() and show() only use the animation queue if a duration is specified.
You can provide a duration of 0 and simply write:
$("#myButton").click(function() {
$(this).hide(0).delay(800).show(0);
});
You will find an updated fiddle here.
1 Comment
user1032531
Thanks Frederic. Ah, this is what I was missing.
Generally speaking, delay() is for animations. Use setTimeout() instead:
$('#myButton').click(function () {
var $this = $(this).hide();
setTimeout(function() {
$this.show();
}, 800);
});
1 Comment
user1032531
Thanks Jason, I would think that hide/show limited animation, but evidently it isn't.
$('#myButton').click(function () {
$(this).fadeOut(0).delay(800).fadeIn(0)
});
Delay only works for animations/queried functions
1 Comment
user1032531
Thanks Spokey, This is probably what I will end up doing, even though Jason's answer more answered my misguided question.
Pass a duration to show() and hide() because when a duration is provided, .show() becomes an animation method.:
$('#myButton').on('click', function() {
$(this).hide(0).delay(800).show(0);
});
Comments
