Basic Effects
| Method | Description |
|---|
| .hide() | Hide element |
| .show() | Show element |
| .toggle() | Toggle visibility |
Fading Effects
| Method | Description |
|---|
| .fadeIn() | Fade in |
| .fadeOut() | Fade out |
| .fadeToggle() | Toggle fade |
| .fadeTo() | Fade to opacity |
Sliding Effects
| Method | Description |
|---|
| .slideDown() | Slide down |
| .slideUp() | Slide up |
| .slideToggle() | Toggle slide |
Custom Animation
| Method | Description |
|---|
| .animate() | Custom properties animation |
| .stop() | Stop current animation |
| .finish() | Jump to end of all animations |
Method Signatures
// Basic
$(selector).hide();
$(selector).show();
$(selector).toggle();
// With duration
$(selector).hide(400);
$(selector).show("slow");
// With callback
$(selector).hide(400, function() {
console.log("Done");
});
// With easing
$(selector).animate({ left: "200px" }, 1000, "swing");
Speed Values
| Keyword | Duration |
|---|
| "slow" | 600ms |
| "normal" | 400ms |
| "fast" | 200ms |
stop() Parameters
$(selector).stop(clearQueue, jumpToEnd);
// clearQueue: boolean - clear animation queue
// jumpToEnd: boolean - jump to end position
Practical Examples
// Accordion
$(".header").click(function() {
$(this).next(".content").slideToggle(300);
});
// Fade gallery
$(".thumb").hover(
function() { $(this).fadeTo(200, 0.7); },
function() { $(this).fadeTo(200, 1); }
);
// Smooth scroll
$("a").click(function(e) {
e.preventDefault();
$("html").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
});
Mini Practice
- Create a fade-in animation on page load
- Build an accordion with slideToggle
- Use animate() for custom movement
- Stop animations on hover
Up Next
Congratulations! You've completed the jQuery course. Continue exploring advanced jQuery patterns and modern alternatives.