Problem with delay in jquery

Question

The delay of this function in jquery is not getting, wanted to know the reason, or another way to make a delay in it.

$("header").delay(1000).css("display", "none");
$(".logo_1").delay(2000).css("display", "none");

NOTE: I have already looked at the whole jquery api this correct as I did but it doesn’t take.

Answer 1

The simplest seems to use the setTimout and the .Hide() (the .hide() does the same as .css('display', 'none')):

setTimeout(function () {
    $("header").hide();
}, 1000);
setTimeout(function () {
    $(".logo_1").hide();
}, 2000);

Example

The jQuery has a "waiting line" .Queue() to be able to chain functions. In this case the appearance would be like this:

$("header")
    .delay(1000)
    .queue(function (next) {
    $(this).css('display', 'none');
});
$(".logo_1")
    .delay(2000)
    .queue(function (next) {
    $(this).css('display', 'none');
});

Example

The reason your code didn’t work is to read on the jQuery documentation page:

the method .delay() allows to delay the execution of functions that are in a Queue. Can be used with a Queue of effects or a customized.

Answer 2

The method delay only goes for animations, and hide an element without fade, only manipulating the property display, does not involve animation.

A brief fadeOut should solve:

$("header").fadeOut(100);
$(".logo_1").delay(2000).fadeOut(100);

Or (same effect):

$("header").hide(100);
$(".logo_1").delay(2000).hide(100);

You will see the delay between the two Ades. If you want a delay at the beginning and there is no pending animation before these, use a setTimeout:

setTimeout(function(){
    $("header").hide(100);
    $(".logo_1").delay(2000).hide(100);
}, 1000);