jQuery UI Size Effect

The jQuery UI size effect resizes an element to a specified width and height.

This is a jQuery UI effect, so the page using it must load jQuery UI in addition to jQuery.

Syntax and Main Options Top ↑

The general form is $(selector).effect(effectName, options, duration, complete). The options available depend on the selected effect.

• to: Object containing the target width and height.
• origin: Vanishing point array. The default is ["top", "left"].
• scale: Choose "both", "box" or "content".
• duration: Animation duration.
• complete: Function called after completion.

Examples Top ↑

Basic syntax

$( "#element" ).effect( "size", { to: { width: 300, height: 100 } }, 600, function () {
    // Runs after the resize finishes.
});

Default size effect

$( "#d1" ).effect( "size" );

Run from a button

$( "#b1" ).on( "click", function () {
    $( "#d1" ).effect( "size" );
});

Resize to a width and height

$( "#d1" ).effect( "size", {
    to: { width: 300, height: 100 }
});

Resize the content area

$( "#d1" ).effect( "size", {
    to: { width: 300, height: 100 },
    scale: "content"
});

Toggle with size and callback

$( "#b1" ).on( "click", function () {
    $( "#d1" ).toggle( "size", 5000, function () {
        alert( "The size toggle has finished." );
    });
});

Open the Size Effect demo →

View demo of all jQuery UI effects →

When to Use This Effect Top ↑

Use this effect when the animation itself helps explain a state change or draws attention to an element. For routine interfaces, keep motion short and purposeful so it does not distract from the content.

← Previous effect · Next effect →

Back to jQuery Effects · jQuery Tutorials Home

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: