The slideUp method

The slideUp method smoothly hides elements by rolling them up from the bottom. You can show elements using the slideDown method.

Syntax

Hide for a specified time, 400ms by default:

.slideUp(duration);

Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation:

.slideUp('slow' or either 'fast');

If you do not specify parameters, there will be no animation, the elements will be hidden instantly:

.slideUp();

You can also pass the smoothing function as the second parameter, and the callback function as the third parameter - it will be triggered after the animation is completed. Both parameters are optional:

.slideUp(duration, [smoothing function], [callback-function office]);

You can pass various options to the method, in the form of a JavaScript object containing key:value pairs:

.slideUp(options);

Such an object can pass the following parameters and functions - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. You can see the description of these parameters for the method animate. For example, let's set the duration and the smoothing function:

.slideUp( {duration: 800, easing: easeInSine} );

Example

Let's smoothly hide the parent div after the button is pressed, which contains the input and the button, using the slideUp method (we will find this div using the parent method). By passing the slow keyword, we will set the speed to 600ms. In div with #test we will display the inscription 'Text is hidden':

<div>
	<button>hide text</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

The slideUp method

Syntax

Example

See also