Slide effects in jQuery


In the previous lesson, Taimienphi.vn introduced you to Fade in and Fade out effects in jQuery, the next lesson below Taimienphi.vn will introduce you to Slide effects in jQuery.


Slide effects in jQuery

Refer to the following article of Taimienphi.vn to learn details about Slide effects in jQuery. In addition, readers can refer to some other jQuery writing articles already available on Taimienphi.vn to learn more about Selector in jQuery.

1. SlideUp () and slideDown () methods in jQuery

Methods slideUp () and slideDown () In jQuery it is used to hide or display HTML elements by descending or increasing the height of the elements (ie sliding up or down).

For example: The following example illustrates how to use the slideUp () and slideDown () methods in jQuery used to hide or display HTML elements:

Understanding slides in jquery

The output will look like the following:

Understanding slides in jquery 2

Similar to other effects methods in jQuery, we can customize the duration parameters for slideUp () and slideDown () methods to control the time the slide runs dynamically.

To customize the duration parameter, we will use one of the predefined “slow” or “fast” strings or the time in milliseconds, the higher the value the slower the slide shows.

For example: The following example illustrates how to fine-tune the duration for the slideUp () and slideDown () methods:

Understanding slides in jquery 3

The output will look like the following:

Understanding slides in jquery 4

We can also specify a callback function to be executed after the slideUp () or slideDown () method is completed, such as in the example below:

Understanding slides in jquery 5

The output will look like the following:

Understanding slides in jquery 6

2. The slideToggle () method in jQuery

Method slideToggle () In jQuery it is used to show or hide the selected element in such a way that if the element was initially displayed it will be slid up, or if hidden it will be slid down, i.e. switch between slideUp methods. () and slideDown ().

For example: The following example illustrates how to use the slideToggle () method in jQuery:

Understanding slides in jquery 7

The output will look like the following:

Understanding slides in jquery 8

Similarly, we can also specify the duration parameters for slideToggle () methods like the slideUp () and slideDown () methods to control the dynamic slide conversion speed.

For example: The following example illustrates how to specify the duration parameter for the slideToggle () method:

Understanding slides in jquery 9

The output will look like the following:

Understanding slides in jquery 10

We can also specify the callback function for the slideToggle () method, see the following example:

Understanding slides in jquery 11

The output will look like the following:

Understanding slides in jquery 12

Above Taimienphi.vn has just introduced you to the slide effects in jQuery. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about how hide HTML elements with jQuery.

https://thuthuat.taimienphi.vn/hieu-ung-slide-trong-jquery-51489n.aspx
In the next lesson, Taimienphi.vn will introduce you further Animation effects in jQuery.

.

Add a Comment

Your email address will not be published. Required fields are marked *