Effects and animations — jQuery

6. Effects and animations

BasicMediumLesson 6 of 10

$("#panel").hide(); $("#panel").show(); $("#panel").toggle();
$("#msg").fadeIn(300).delay(2000).fadeOut(300);
$("#menu").slideToggle("fast");
$("#box").animate({ left: "+=50px", opacity: 0.5 }, 400, "swing", () => console.log("done"));
$("#box").stop(true, true);     // stop queued animations

Modern alternative: CSS transitions/animations toggled with classes (classList.toggle) — smoother (GPU) and easier to maintain.