jQuery Events ও Effects

Event Handling

// Shortcut events
$("#btn").click(function() { ... });
$("#btn").dblclick(function() { ... });
$("input").focus(function() { ... });
$("input").blur(function() { ... });
$("input").change(function() { ... });
$("form").submit(function(e) {
    e.preventDefault();
    // ...
});
$(document).keydown(function(e) {
    if (e.key === "Escape") closeModal();
});

// Hover (mouseenter + mouseleave)
$(".card").hover(
    function() { $(this).addClass("over"); },   // enter
    function() { $(this).removeClass("over"); } // leave
);

// on() ⭐ সবচেয়ে নমনীয়
$("#btn").on("click", function(e) {
    console.log("Clicked");
});

// একাধিক event একসাথে
$("#btn").on("mouseenter mouseleave", function() {
    $(this).toggleClass("over");
});

// Event Delegation (dynamic element এর জন্য)
$("#list").on("click", "li", function() {
    $(this).toggleClass("done");
});

// Unbind
$("#btn").off("click");
$("#btn").off();   // সব event সরাও

// Trigger (manually fire)
$("#btn").trigger("click");
$("#btn").click();   // shortcut

this কীওয়ার্ড jQuery-তে

$(".item").click(function() {
    // this = native DOM element
    // $(this) = jQuery object
    $(this).addClass("selected");
    console.log($(this).text());
});

Hide/Show

$(".box").hide();
$(".box").show();
$(".box").toggle();

// Animation সহ
$(".box").hide(500);            // 500ms
$(".box").show("slow");         // slow/fast
$(".box").toggle(300);

Fade Effects

$(".box").fadeIn();
$(".box").fadeOut();
$(".box").fadeToggle();
$(".box").fadeTo(500, 0.5);    // 50% opacity

Slide Effects

$(".menu").slideDown();
$(".menu").slideUp();
$(".menu").slideToggle();

// Callback (animation শেষে)
$(".box").fadeOut(500, function() {
    console.log("ফেড শেষ!");
});

Custom Animation

$(".box").animate({
    left: "200px",
    opacity: 0.5,
    width: "300px",
    height: "toggle"
}, 1000, "swing", function() {
    console.log("Animation শেষ");
});

// Chaining ⭐
$(".box")
    .addClass("active")
    .fadeOut(500)
    .fadeIn(500)
    .css("color", "red")
    .animate({ left: "100px" }, 1000);

// Queue বন্ধ
$(".box").stop();                // বর্তমান animation থামাও
$(".box").stop(true);             // সব queue clear
$(".box").finish();               // immediately শেষ state

বাস্তব উদাহরণ: Accordion

$(".accordion-title").on("click", function() {
    $(this).next(".accordion-content").slideToggle();
    $(this).toggleClass("open");
    $(this).parent().siblings().find(".accordion-content").slideUp();
});