jQuery

Effects & Animation

Show, hide, fade, slide, and animate elements.

By EZ4Code TeamLast updated: 2026-08-01

effectsanimation

Code

// Basic show/hide with animation
$("#box").hide(300);
$("#box").show("slow");
$("#box").toggle(200);

// Fading
$("#box").fadeIn(500).fadeOut(500);
$("#box").fadeTo(300, 0.5);

// Sliding
$("#panel").slideDown(200);
$("#panel").slideUp("fast");
$("#panel").slideToggle();

// Custom animation
$("#box").animate(
  { width: "+=50", opacity: 0.5 },
  400,
  "swing",
  () => console.log("done")
);

// Stop queued animations
$("#box").stop(true, true);

Explanation

Effects animate element visibility and CSS properties over a duration in milliseconds (or slow/fast). animate() tweens numeric properties with easing. stop(clearQueue, jumpToEnd) cancels queued effects to prevent animation buildup.

More jQuery Snippets

Selectors

Select elements by id, class, attribute, and pseudo-filters.

Events & Delegation

Bind handlers with on(), support delegation and namespaced removal.

DOM Manipulation

Get/set text, html, attributes, classes, and insert nodes.

AJAX Requests

Use $.ajax, $.get, $.post, and load with promises.

Traversing the DOM

Navigate relatives and filter the matched set.

Utility Methods

Iterate, merge, and filter with jQuery helpers.