This question has already been answered:

$(".user-panel-header .user-panel__head").click(function(e) { e.preventDefault(); $(this).toggleClass("user-panel__head_active"); $(".user-panel__user-menu").slideToggle(500); if ( $(".user-panel-header .user-panel__head").hasClass("user-panel__head_active") ) { $(".user-panel-header .user-panel__head").css({"background":"#5f8898"}); } else { $(".user-panel-header .user-panel__head").delay(500).css("background","transparent"); } });

Reported as a duplicate by members of Pavel Mayorov , Qwertiy ♦ , Android Android , user207618, Kostiantyn Okhotnyk Jun 23 '17 at 17:35 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • I've already seen this question ... - Pavel Mayorov

2 answers 2

The .delay() function sets a delay before performing the next function in the queue. You can queue your function with .queue() .

 $(".user-panel-header .user-panel__head").delay(500).queue(function (next) { $(this).css("background", "transparent"); next(); });

Such a method may be more convenient than .setTimeout() in case more complicated manipulation with elements is needed. For example,

 $(selector) .delay(500) .queue(function (next) { /* что-то делаем */ }) .delay(500) .fadeOut();
  • Thank! Can you tell me where is the best place to learn jQuery? (Russian-language resource) - Vitaly Cherny
  • There are useful links here - Dmitry

Here is an excerpt from the jQuery documentation:

The .delay () command allows you to set the delay time for the following animation effects functions in the queue for each element of the jQuery set

In your case, you just need to make a delay in code execution through

 setTimeout(function() { $(".user-panel-header .user-panel__head").css("background","transparent"); }, 500)
  • one
    This is also the answer, but which I noted "right" closer to the jQuery context. Thank! - Vitaly Cherny