jQuery .speed() Method

What Is $.speed()?

jQuery.speed([duration] [, settings|easing] [, complete]) creates a plain object of animation properties — duration, easing, complete, queue — ready for custom animations (since 1.0; extra overloads since 1.1).

$.speed();                    // { duration: 400, easing: "swing", … }
$.speed("slow");              // duration → 600
$.speed("fast");              // duration → 200
$.speed(800, "linear", fn);   // positional form
$.speed({ duration: 800, easing: "linear", complete: fn });

// Meant for plugins — avoid re-implementing default/optional-arg logic

How to Use $.speed()

Call it once to normalize arguments, then feed the result into .animate() (or your plugin’s tween).

1. Accept flexible args in your plugin (duration, options object, or both).
2. Pass them through $.speed(…) to fill defaults.
3. Read opt.duration, opt.easing, and opt.complete.
4. Call .animate(props, opt) or pass values positionally.
5. Remember jQuery.fx.off can still force zero-duration playback.

Pseudocode

call $.speed(args…)

parse overloads:
    settings-only object
    OR duration + settings
    OR duration + easing + complete

normalize duration:
    if "slow" → 600
    if "fast" → 200
    if missing → 400

normalize easing:
    if missing → "swing"

return {
    duration, easing, complete, queue, …
}

plugin:
    opt = $.speed(userOptions)
    $el.animate(props, opt)

Cheat Sheet

Keep these facts handy while writing effect plugins.

Live Preview

Inspect what $.speed() returns for defaults and named speeds.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var defaults = $.speed();

console.log(defaults.duration); // 400
console.log(defaults.easing);   // "swing"
console.log(defaults.queue);    // true

duration: 400
easing: swing
queue: true

function onDone() {
  $("#done-msg").text("Animation complete!");
}

var opt = $.speed({
  duration: 800,
  easing: "linear",
  complete: onDone
});

$("#box").animate({ left: 200 }, opt.duration, opt.easing, opt.complete);

opt.duration → 800
opt.easing → linear
complete fires when the tween ends

var opt = $.speed(600, "swing", function () {
  $("#status").text("Done at 600 ms");
});

$("#box").animate({ opacity: 1 }, opt.duration, opt.easing, opt.complete);

duration → 600
easing → swing
status → "Done at 600 ms"

$.fn.pulse = function (options) {
  return this.each(function () {
    var opt = $.speed(options);
    var $el = $(this);
    $el.animate({ opacity: 0.35 }, opt.duration, opt.easing, function () {
      $el.animate({ opacity: 1 }, opt.duration, opt.easing, opt.complete);
    });
  });
};

$(".pulse-target").pulse({ duration: 400, easing: "swing" });

Targets fade down, then back up
Uses normalized duration/easing
complete runs after the second tween

$.speed("slow").duration; // 600
$.speed("fast").duration; // 200

var opt = $.speed("slow");
$("#box").animate({ width: 220 }, opt.duration, opt.easing);

slow → 600 ms
fast → 200 ms

Performance Notes

$.speed() itself is cheap. Animation cost comes from the tweens you start afterward — keep durations reasonable and avoid flooding the fx queue.

Key Takeaways