← Back to Index

.animate()

Perform a custom animation of a set of CSS properties. Also includes shorthand methods for fading and sliding.

Examples

1. Basic Animation

$('#box').animate({
     opacity: 0.5,
     marginLeft: '50px',
     width: 200
}, {
     duration: 600,
     easing: 'ease-out',
     after: () => console.log('Done')
});

Result

<!-- After 600ms -->
<div id="box" style="opacity: 0.5; margin-left: 50px; width: 200px;"></div>

2. Animation with Callback

$('.panel').animate({ height: '0px' }, {
     duration: 400,
     easing: 'linear',
     after: function() {
          $(this).hide();
     }
});

Result

<!-- Step 1: Animates height to 0 -->
<!-- Step 2: Callback runs, setting display: none -->
<div class="panel" style="height: 0px; display: none;"></div>

3. Presets (Fade/Slide)

$('#msg').fadeIn(400);
$('#menu').slideUp(200);

Result

<div id="msg" style="display: block; opacity: 1;">...</div>
<div id="menu" style="display: none; height: 0px;">...</div>

Parameters (.animate)

Parameter	Type	Description
properties	object	An object of CSS properties and values that the animation will move toward. Numeric values are treated as pixels unless specified otherwise.
settings	object	Optional. An object of settings to configure the animation. duration (number | string): Duration in milliseconds or a preset ('fast', 'slow'). Default: 400. easing (string): The easing function ('linear', 'swing', etc.). Default: 'swing'. after (function): A callback to run after the animation. `this` refers to the DOM element.

Parameters (Shorthand Methods)

Applies to: .fadeIn(), .fadeOut(), .fadeToggle(), .slideDown(), .slideUp(), .slideToggle().

Parameter	Type	Description
duration	number | string	Optional. Duration in milliseconds or a preset ('fast', 'slow'). Default: 400.
callback	function	Optional. A function to call once the animation completes.

Returns: The original SR object for chaining.