CODEWITHSUNDEEP
jquery
user1032531
user1032531

Reputation: 26281

jQuery delay and hide element

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()});

Upvotes: 1

Views: 299

Answers (4)

chridam
chridam

Reputation: 103355

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);
});

JSFiddle

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

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.

Upvotes: 3

Spokey
Spokey

Reputation: 10994

$('#myButton').click(function () {
    $(this).fadeOut(0).delay(800).fadeIn(0)
});

Delay only works for animations/queried functions

Upvotes: 2

Jason P
Jason P

Reputation: 27012

Generally speaking, delay() is for animations. Use setTimeout() instead:

http://jsfiddle.net/rGqpn/

$('#myButton').click(function () {
    var $this = $(this).hide();
    setTimeout(function() {
        $this.show();
    }, 800);
});

Upvotes: 2

Related Questions