$(document).ready(function() {
    // Fade effect
    $("#fadeBtn").click(function() {
        $("#demoBox").fadeOut(500).fadeIn(500);
        $("#box1, #box2, #box3").fadeToggle(800);
    });

    // Slide effect
    $("#slideBtn").click(function() {
        $("#box1").slideUp(400).slideDown(400);
        $("#box2").slideToggle(600);
        $("#box3").animate({
            width: "toggle",
            height: "toggle"
        }, 600);
    });

    // Animation effect
    $("#animateBtn").click(function() {
        $("#demoBox").toggleClass("animated-box");
        $("#box1").animate({left: '+=50'}, 300);
        $("#box2").animate({top: '+=30'}, 300).animate({top: '-=30'}, 300);
        $("#box3").animate({width: '100px'}, 300).animate({width: '80px'}, 300);
    });

    // Add hover effects
    $("button").hover(
        function() {
            $(this).css('transform', 'translateY(-2px)');
        },
        function() {
            $(this).css('transform', 'translateY(0)');
        }
    );
});