jQuery can be used to hide, show, fade in/out, or slide up/down HTML elements on the page, creating effects and animations with a great deal of control.

The following are some quick examples of the methods used to create effects. A complete list of effects can be found here along with more detailed descriptions of their intended use and syntax.

The animate() method performs a custom animation on an HTML element, changing one CSS property value to another gradually, creating an animated effect.

// animate the opacity of the element to 0.2, slowly, using "swing" easing
$('button').click(function() {
    $('div').animate({opacity: '0.2'}, 'slow', 'swing');
});

The fadeIn() method gradually changes, fades in, the opacity for the selected element from completely hidden to completely visible. The visible item will now take up space on the page, affecting the layout.

// fade element in over 2000ms using "swing" easing
$('button').click(function() {
    $('div').fadeIn(2000, 'swing');
});

The fadeOut() method gradually changes, fades out, the opacity for the selected element from completely visible to completely hidden. The hidden item will no longer take up space on the page, affecting the layout.

// fade element out over 2000ms using "swing" easing
$('button').click(function() {
    $('div').fadeOut(2000, 'swing');
});

The hide() method hides the selected element. The hidden item will no longer take up space on the page, affecting the layout.

// hide the element over 2000ms using "swing" easing
$('button').click(function() {
    $('div').hide(2000, 'swing');
});

The show() method shows the selected hidden element. The shown item will now take up space on the page, affecting the layout. It works on elements hidden with jQuery methods and those with display: none in CSS.

// show the element over 2000ms using "swing" easing
$('button').click(function() {
    $('div').show(2000, 'swing');
});

The slideDown() method slides down and shows the selected element. The visible item will now take up space on the page, affecting the layout. It works on elements hidden with jQuery methods and those with display: none in CSS.

// slide the element down over 2000ms using "swing" easing
$('button').click(function() {
    $('div').slideDown(2000, 'swing');
});

The slideUp() method slides up and hides the selected element. The hidden item will no longer take up space on the page, affecting the layout.

// slide the element up over 2000ms using "swing" easing
$('button').click(function() {
    $('div').slideUp(2000, 'swing');
});

---