jQuery Animate Effect Method

1. jQuery Animation Overview

jQuery animations let you transition element styles smoothly by changing numeric CSS values over time. Use the core animate() method for custom tweens, or shorthand methods like slideDown(), fadeIn(), and toggle() for common effects.

1.1. Syntax

The basic syntax of the animate() method is below.

$(selector).animate({ params }, speed, callback);

1.2. Manipulate Single CSS Property

Let’s understand the syntax of jQuery animate() by manipulating a single CSS property. In this example, we will change the width of a box smoothly over 500 milliseconds.

// Animate width to 300px over 500ms
$('#myBox').animate(
  { width: '300px' },
  500,
  function() {
    console.log('Width animation completed.');
  }
);

1.3. Animate Multiple CSS Properties

Understand the syntax of jQuery animate() effect method with this following example, in which multiple CSS properties are manipulated.

// Move, fade, and resize concurrently
$('#card')
  .animate({ left: '+=100px', opacity: 0.75 }, 600)
  .animate({ width: '300px', height: '200px' }, 800, function() {
    console.log('Phase 1 complete');
  });
// Finally bounce back
$('#card').animate({ left: '-=100px' }, {
  duration: 400,
  easing: 'swing',
  complete: function() { alert('Animation sequence finished!'); }
});

1.4. Can We Animate All CSS Properties with animate()?

• Yes, you can animate most numeric CSS properties using animate().
• Property names must be written in camelCase, for example:
  • paddingLeft instead of padding-left
  • marginRight instead of margin-right
• Color animations are not included in the core jQuery library.
• To animate colors, you need the Color Animations plugin from jQuery.com.

2. Core animate() Method

With jQuery animate() function, we can define custom animations as per our needs without any limits. The animate() method lets you define an object of CSS properties and have jQuery interpolate each numeric value over a specified duration.

2.1. Duration Variants

We can control how fast or slow the animation runs using jQuery animate() method. Just pass the time in milliseconds (like 400) or use the special words 'slow' (600 ms) or 'fast' (200 ms). Longer durations make the animation look smoother and slower.

// Smooth slide and height change
$notification
	.animate({ top: '0px', opacity: 1, height: '50px' }, 600)
	.delay(1000)
	.animate({ height: '0px', opacity: 0 }, 400);

2.2. Relative Tweens

Instead of setting a fixed end value, we can animate an element relative to its current value. For example, '+=50px' makes the property increase by 50 pixels from where it is now. This is called a relative tween in jQuery, and it’s useful for building effects like moving or growing step by step.

$(document).ready(function(){
	$('#startBtn').click(function(){
		var $box = $('#pulseBox');
		$box
			.animate({width: '+=50px', height: '+=50px'}, {duration:400, easing:'swing'})
			.animate({backgroundColor:'#27ae60'}, 300)
			.animate({width: '-=50px', height: '-=50px'}, 400)
			.animate({backgroundColor:'#e67e22'}, 300)
			.animate({left: '+=80px', top: '+=80px'}, 500)
			.animate({left: '-=80px', top: '-=80px'}, 500)
			.animate({left: '-=80px', top: '+=80px'}, 500)
			.animate({left: '+=80px', top: '-=80px'}, 500);
	});
});

2.3. Easing Functions

Easing functions control the speed curve of the animation over time. The default easing is 'swing', which starts slowly, speeds up in the middle, and slows down at the end, creating a smooth, natural feel. You can pass 'linear' for a constant speed from start to finish.

If you include jQuery UI, you get many more easing options:

• easeInQuad, easeOutQuad, easeInOutQuad
• easeInCubic, easeOutCubic, easeInOutCubic
• easeInQuart, easeOutQuart, easeInOutQuart
• easeInQuint, easeOutQuint, easeInOutQuint
• easeInExpo, easeOutExpo, easeInOutExpo
• easeInSine, easeOutSine, easeInOutSine
• easeInCirc, easeOutCirc, easeInOutCirc
• easeInElastic, easeOutElastic, easeInOutElastic
• easeInBack, easeOutBack, easeInOutBack
• easeInBounce, easeOutBounce, easeInOutBounce

$('#linear').click(function(){
	$menu.stop(true)
	.css({ left: '-220px', opacity: 1, display: 'flex' })
	.animate({ left: '0px' }, 700, 'linear');
});
$('#swing').click(function(){
	$menu.stop(true)
	.css({ left: '-220px', opacity: 1, display: 'flex' })
	.animate({ left: '0px' }, 700, 'swing');
});

2.4. Callback & Promises

Provide a callback for each element after its animation finishes, or chain a promise for group completion.

$(document).ready(function() {
  $('#startBtn').click(function() {
	$('.item').each(function(index) {
		$(this)
			.delay(300 * index)
			.animate({ opacity: 0.2 }, 300)
			.animate({ borderRadius: '50px' }, 300)
			.animate({ borderRadius: '0px' }, 300)
			.animate({ opacity: 1 }, 300);
	});
	$('.item').promise().done(function() {
	  $('#summary').fadeIn(500);
	});
  });
});

2.5. Chaining Animations

Chain multiple animate() calls to queue sequential effects.

$(document).ready(function() {
  $('#startBtn').click(function() {
	$('.item').each(function(index) {
		$(this)
			.delay(300 * index)
			.animate({ opacity: 0.2 }, 300)
			.animate({ borderRadius: '50px' }, 300)
			.animate({ borderRadius: '0px' }, 300)
			.animate({ opacity: 1 }, 300);
	});
	$('.item').promise().done(function() {
	  $('#summary').fadeIn(500);
	});
  });
});

2.6. jQuery animate() - Predefined Values

Some CSS properties in jQuery support predefined values like "show", "hide", and "toggle" within the animate() method. These allow for quick visibility animations without specifying numeric values.

Only a few properties accept predefined values like:

1. height
2. width

$(document).ready(function() {
	$('#toggleWidth').click(function() {
		$('#box1').animate({ width: 'toggle' }, 500);
	});

	$('#toggleHeight').click(function() {
		$('#box2').animate({ height: 'toggle' }, 500);
	});
});

2.7. jQuery animate() - Queue Control

Use the queue option to control whether an animation is added to the animation queue or runs immediately. By default, queue is true, meaning animations are executed one after another. Setting queue: false makes animations run simultaneously.

$('#queueFalse').click(function () {
	$('.box').animate({ left: '+=100px' }, { duration: 800, queue: false });
	$('.box').animate({ top: '+=100px' }, { duration: 800, queue: false });
	$('.box').animate({ width: '200px' }, { duration: 800, queue: false });
	$('.box').animate({ height: '200px' }, { duration: 800, queue: false });
	$('.box').animate({ borderRadius: '200px' }, { duration: 800, queue: false });
});

$("button").click(function () {
	var div = $(".box");
	div.animate({ height: '300px', opacity: 0.4 }, "slow");
	div.animate({ width: '400px', opacity: 0.8 }, { duration: "slow", queue: true }); // queue: true (default)
	div.animate({ height: '100px', opacity: 0.4 }, "slow");
	div.animate({ width: '100px', opacity: 0.8 }, "slow");
});

2.8. Performance Tips

• Animate transform and opacity for GPU acceleration.
• Avoid layout‑thrashing properties (width/height) on large DOM sets.
• Debounce scroll/tick triggers when animating on scroll.

3. Wrapping Up jQuery Animations

jQuery’s animation APIs remain a powerful tool for creating interactive UIs. By choosing the right method, custom animate() calls, shorthand slide/fade effects, or integrating modern libraries, you can deliver engaging experiences with clean, forward‑looking code.