.delay() | JQuery API Documentation

Home » Add Delay Animate Jquery » .delay() | JQuery API Documentation

Maybe your like

jQuery API Documentation

Navigation

.delay( duration [, queueName ] )Returns: jQuery

Description: Set a timer to delay execution of subsequent items in the queue.

  • version added: 1.4.delay( duration [, queueName ] )

    • duration Type: Integer An integer indicating the number of milliseconds to delay execution of the next item in the queue.
    • queueName Type: String A string containing the name of the queue. Defaults to fx, the standard effects queue.

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.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Using the standard effects queue, we can, for example, set an 800-millisecond delay between the .slideUp() and .fadeIn() of <div id="foo">:

1 $( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Animate the hiding and showing of two divs, delaying the first before showing it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>delay demo</title> <style> div { position: absolute; width: 60px; height: 60px; float: left; } .first { background-color: #3f3; left: 0; } .second { background-color: #33f; left: 80px; } </style> <script src="https://code.jquery.com/jquery-3.7.1.js"></script></head><body> <p><button>Run</button></p><div class="first"></div><div class="second"></div> <script>$( "button" ).on( "click", function() { $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 ); $( "div.second" ).slideUp( 300 ).fadeIn( 400 );});</script> </body></html>

Demo:

  • Ajax
    • Global Ajax Event Handlers
    • Helper Functions
    • Low-Level Interface
    • Shorthand Methods
  • Attributes
  • Callbacks Object
  • Core
  • CSS
  • Data
  • Deferred Object
  • Deprecated
    • Deprecated 1.3
    • Deprecated 1.7
    • Deprecated 1.8
    • Deprecated 1.9
    • Deprecated 1.10 & 2.0
    • Deprecated 3.0
    • Deprecated 3.2
    • Deprecated 3.3
    • Deprecated 3.4
    • Deprecated 3.5
    • Deprecated 3.7
  • Dimensions
  • Effects
    • Basics
    • Custom
    • Fading
    • Sliding
  • Events
    • Browser Events
    • Document Loading
    • Event Handler Attachment
    • Event Object
    • Form Events
    • Keyboard Events
    • Mouse Events
  • Forms
  • Internals
  • Manipulation
    • Class Attribute
    • Copying
    • DOM Insertion, Around
    • DOM Insertion, Inside
    • DOM Insertion, Outside
    • DOM Removal
    • DOM Replacement
    • General Attributes
    • Style Properties
  • Miscellaneous
    • Collection Manipulation
    • Data Storage
    • DOM Element Methods
    • Setup Methods
  • Offset
  • Properties
    • Properties of jQuery Object Instances
    • Properties of the Global jQuery Object
  • Removed
  • Selectors
    • Attribute
    • Basic
    • Basic Filter
    • Child Filter
    • Content Filter
    • Form
    • Hierarchy
    • jQuery Extensions
    • Visibility Filter
  • Traversing
    • Filtering
    • Miscellaneous Traversing
    • Tree Traversal
  • Utilities
  • Version
    • Version 1.0
    • Version 1.0.4
    • Version 1.1
    • Version 1.1.2
    • Version 1.1.3
    • Version 1.1.4
    • Version 1.2
    • Version 1.2.3
    • Version 1.2.6
    • Version 1.3
    • Version 1.4
    • Version 1.4.1
    • Version 1.4.2
    • Version 1.4.3
    • Version 1.4.4
    • Version 1.5
    • Version 1.5.1
    • Version 1.6
    • Version 1.7
    • Version 1.8
    • Version 1.9
    • Version 1.11 & 2.1
    • Version 1.12 & 2.2
    • Version 3.0
    • Version 3.1
    • Version 3.2
    • Version 3.3
    • Version 3.4
    • Version 3.5
    • Version 3.6
    • Version 3.7
    • Version 4.0

Tag » Add Delay Animate Jquery