YouTip**Possible values:**
• Duration in milliseconds (e.g., `400`, `1000`)
• `"slow"` (600 ms)
• `"fast"` (200 ms) | | **`easing`** | *String* | *Optional.* Specifies the speed curve of the animation. Default is `"swing"`.
**Possible values:**
• `"swing"` - Slower at the beginning and end, faster in the middle.
• `"linear"` - Constant speed throughout the animation.
*Note: More easing functions are available via external plugins (like jQuery UI).* | | **`callback`** | *Function* | *Optional.* A function to be executed after the `slideUp()` animation is fully completed. | --- ## Code Examples ### 1. Basic Usage The following example hides all `
` elements with a default sliding-up animation when a button is clicked: ```javascript $("button").click(function(){ $("p").slideUp(); }); ``` ### 2. Using the `speed` Parameter You can control how fast the slide-up transition occurs by passing a specific duration in milliseconds or using preset strings like `"slow"` or `"fast"`: ```javascript // Slide up slowly (600 milliseconds) $("#btn-slow").click(function(){ $(".box").slideUp("slow"); }); // Slide up quickly (200 milliseconds) $("#btn-fast").click(function(){ $(".box").slideUp("fast"); }); // Slide up with a custom duration (1.5 seconds) $("#btn-custom").click(function(){ $(".box").slideUp(1500); }); ``` ### 3. Using the `callback` Function The callback function is highly useful when you want to execute an action only *after* the slide-up animation has completely finished. ```javascript $("button").click(function(){ $(".panel").slideUp("slow", function(){ // This alert runs only after the panel is completely hidden alert("The panel is now hidden."); }); }); ``` --- ## Technical Considerations * **Layout Impact:** When an element is hidden using `slideUp()`, its `display` property is set to `none` at the end of the animation. This means the element is removed from the document flow and no longer takes up any visual space. * **Opposite Method:** To reveal a hidden element with a sliding-down motion, use the [slideDown()](eff-slidedown.html) method. * **Toggle State:** If you want to alternate between sliding up and sliding down based on the element's current visibility state, use the `slideToggle()` method instead.