[javascript] How can I use delay() with show() and hide() in Jquery

How can I use delay() with show() and hide() in Jquery ?

This question is related to javascript jquery hide delay show

The answer is


Pass a duration to show() and hide():

When a duration is provided, .show() becomes an animation method.

E.g. element.delay(1000).show(0)

DEMO


Why don't you try the fadeIn() instead of using a show() with delay(). I think what you are trying to do can be done with this. Here is the jQuery code for fadeIn and FadeOut() which also has inbuilt method for delaying the process.

$(document).ready(function(){
   $('element').click(function(){
      //effects take place in 3000ms
      $('element_to_hide').fadeOut(3000);
      $('element_to_show').fadeIn(3000);
   });
}

The easiest way is to make a "fake show" by using jquery.

element.delay(1000).fadeIn(0); // This will work

from jquery api

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

http://api.jquery.com/delay/


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to hide

bootstrap 4 responsive utilities visible / hidden xs sm lg not working jQuery get the name of a select option jQuery select change show/hide div event Hide Show content-list with only CSS, no javascript used Permanently hide Navigation Bar in an activity How can I hide/show a div when a button is clicked? jQuery hide and show toggle div with plus and minus icon Hide Text with CSS, Best Practice? Show div #id on click with jQuery JavaScript - Hide a Div at startup (load)

Examples related to delay

Delaying function in swift How to create a delay in Swift? How to make java delay for a few seconds? Proper way to wait for one function to finish before continuing? Javascript sleep/delay/wait function How can I perform a short delay in C# without using sleep? How to create javascript delay function JavaScript sleep/wait before continuing Adding delay between execution of two following lines How to put a delay on AngularJS instant search?

Examples related to show

How to show all of columns name on pandas dataframe? jQuery select change show/hide div event Hide Show content-list with only CSS, no javascript used How can I hide/show a div when a button is clicked? jQuery hide and show toggle div with plus and minus icon Show div #id on click with jQuery jQuery if statement to check visibility How to print a double with two decimals in Android? Programmatically Hide/Show Android Soft Keyboard Show Hide div if, if statement is true