The document discusses various jQuery effects for fading, sliding, and animating HTML elements. It describes methods such as hide() and show() for hiding and showing elements, toggle() for toggling between the two, fadeIn() and fadeOut() for fading elements in and out, fadeToggle() for toggling between the two, slideDown() and slideUp() for sliding elements down and up, slideToggle() for toggling between the two, and animate() for creating custom animations by defining CSS properties, speed, and callbacks.
2. Basics
■ jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods.
Syntax:
$(selector).hide(speed, callback); $(selector).show(speed, callback);
3. Basics
■ jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown.
Syntax:
$(selector).toggle(speed, callback);
4. Fading
With jQuery you can fade an element in and out of visibility.
■ jQuery fadeIn()
The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
$(selector).fadeIn(speed, callback);
5. Fading
With jQuery you can fade an element in and out of visibility.
■ jQuery fadeOut()
The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed, callback);
6. Fading
With jQuery you can fade an element in and out of visibility.
■ jQuery fadeToggle()
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed, callback);
7. Fading
With jQuery you can fade an element in and out of visibility.
■ jQuery fadeTo()
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed, opacity, callback);
8. Sliding
With jQuery you can create a sliding effect on elements.
■ jQuery slideDown()
The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed, callback);
9. Sliding
With jQuery you can create a sliding effect on elements.
■ jQuery slideUp()
The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed, callback);
10. Sliding
With jQuery you can create a sliding effect on elements.
■ jQuery slideToggle()
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements are slide down, slideToggle() will slide them up.
If the elements are slide up, slideToggle() will slide them down.
Syntax:
$(selector).slideToggle(speed, callback);
11. Animations
The jQuery animate() method is used to create custom animations.
■ jQuery animate()
Syntax:
$(selector).animate({params}, speed, callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow",
"fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the animation completes.