Delay JQuery Animation By Few Seconds

Home » Add Delay Animate Jquery » Delay JQuery Animation By Few Seconds

Maybe your like

Learning jQuery Tips, techniques, and tutorials for the jQuery JavaScript library jQuery to limit number of checkboxes checked by User Disable odd checkbox of Checkbox list using jQuery Apr 08 2013

Delay jQuery animation by few seconds

by vikas I got into a situation where I needed to start the animation after 2 seconds once the mouse is on the image. In other words, need to delay the animation for 2 seconds on mouseover event. So in this post I am sharing the jQuery solution to delay the animation by few seconds.

Related Post:

  • jQuery.fx.interval Property
  • How to disable jQuery animation
  • 8 jQuery Loading Animation and Progress Bar Plugin

To delay execution of animation, use .delay() method which allows to delay the execution of functions that follow it in the queue. It accepts duration as parameter. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

$(document).ready(function () { $('img').mouseenter(function () { $(this).stop().delay(1000).animate({ height: '+=50px', width: '+=50px' }); }); $('img').mouseleave(function () { $(this).stop().delay(1000).animate({ height: '-=50px', width: '-=50px' }); }); }); Demo & Code

Feel free to contact me for any help related to jQuery, I will gladly help you. Scripts Used on This Site

Popular Posts

  • Using jQuery's Data APIs
  • Merging jQuery Deferreds and .animate()
  • A jQuery UI Combobox Under the Hood
  • Quick Tip: Prevent Animation Queue Buildup
  • Working with Events, part 1
  • Improved Animated Scrolling Script for Same-Page Links

Navigation

  • Home
  • Categories
  • Archives
  • About
  • Contact

Popular Posts

  • Using jQuery's Data APIs
  • Merging jQuery Deferreds and .animate()
  • A jQuery UI Combobox Under the Hood
  • Quick Tip: Prevent Animation Queue Buildup
  • Working with Events, part 1
  • Improved Animated Scrolling Script for Same-Page Links

Recommended Book

  • Learning jQuery, Fourth Edition book Learning jQuery,Fourth EditionBy Karl Swedberg & Jonathan Chaffer

Links

Take A Look At Our Achives!

What Is This?

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. We have tutorials for all skill levels, and each entry is categorized by level of difficulty.

Pages

  • Home
  • Categories
  • Archives
  • About
  • Contact
  • Cookies and privacy policy

RSS

  • Entries (RSS)
  • Comments (RSS)
Creative Commons License

© Copyright 2006–2025 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License. Code examples are under your choice of MIT or GPL license.

Development & Design by Landocs with WordPress

Responsive Menu Add more content here...

Tag » Add Delay Animate Jquery