jQuery does say it will revert the CSS attributes when you call .show()
, but not .hide()
.
The documentation for .hide()
says:
This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value.
If you .hide()
and element first and then .show()
it, jQuery will attempt to restore the original display value for the element. However, in your case you call in the order .show(x).delay(x).hide(x)
, with .hide()
being the last function called which does not restore any values but merely applies .css("display", "none")
on the element (and saves a value in case you call .show()
later). The order matters.
Thus in this case you should use a complete callback function to remove the display attribute.
$('.product').on('click', function(){
$('.drawer').html("Something in your basket")
.show(200).delay(500).hide(200, function() {
$(this).css("display", "");
});
});