Part 4.2jQuery slide animations

As an extension of the previous tutorial in this course, this tutorial will continue to exemplify some of the basic built-in animations (which are often very helpful).

The demo on the right will be affected whenever the code is run on any of the samples following it.

Slide button

Reset

slideUp & slideDown

The jQuery slideUp and slideDown methods are used to make an element slide up or down. The example below shows one of the 'zones' on this website as an example of what it can do:

The jQuery slideUp method can be combined with the slideDown function

jQuery("#main_image_display").slideUp();

jQuery("#main_image_display").slideDown();

slideToggle

Much like with the previous tutorial, slide features can be toggled. This example binds a function to the click event on the button in the preview which triggers the slideToggle on the main image:

jQuery("#slider_button").on("click", function() {
	jQuery("#main_image_display").slideToggle();
});