انیمیشن در jQuery

ساخت انیمیشن سفارشی با متد animate() و صف انیمیشن

متد animate()

متد animate() به شما اجازه می‌دهد انیمیشن سفارشی بسازید. این متد ویژگی‌های CSS عنصر را به‌تدریج از مقدار فعلی به مقدار جدید تغییر می‌دهد:

$(selector).animate({params}, speed, callback);

مثال ساده

$("button").click(function() {
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

کدام ویژگی‌ها قابل انیمیت هستند؟

فقط ویژگی‌هایی که مقدار عددی دارند قابل انیمیت‌اند:

قابل انیمیت ✅غیرقابل انیمیت ❌
width، heightbackground-color
top، left، right، bottomcolor
opacityfont-family
margin، padding (عددی)border-style
fontSize، borderWidthposition
برای انیمیت کردن left، top، right و bottom، عنصر باید position: relative، absolute یا fixed داشته باشد؛ در غیر این صورت حرکت نمی‌کند!

مقادیر نسبی

می‌توانید نسبت به مقدار فعلی تعیین کنید — با += یا -=:

// هر کلیک، جعبه ۵۰ پیکسل به راست و ۲۰ پیکسل بزرگ‌تر می‌شود
$("button").click(function() {
    $("div").animate({
        left: '+=50px',
        width: '+=20px'
    });
});

مقادیر از پیش تعریف‌شده

برای height و width می‌توانید از "show"، "hide" و "toggle" هم استفاده کنید:

$("div").animate({ height: "toggle" });

صف انیمیشن (Queue)

اگر چند animate() پشت سر هم بنویسید، jQuery آن‌ها را در یک صف قرار می‌دهد و به‌ترتیب اجرا می‌کند:

// این‌ها همزمان نیستند! یکی بعد از دیگری اجرا می‌شوند
$("button").click(function() {
    var div = $("div");
    div.animate({ height: '300px', opacity: '0.4' }, "slow");
    div.animate({ width: '300px' }, "slow");
    div.animate({ height: '100px', opacity: '0.8' }, "slow");
    div.animate({ width: '100px' }, "slow");
});
نکته جالب: اگر چند ویژگی را داخل یک animate بگذارید همزمان تغییر می‌کنند؛ اما animateهای جداگانه پشت سر هم (به‌صورت صف) اجرا می‌شوند.

مثال کاربردی: انیمیشن حرکت توپ

// پرتاب توپ به سمت راست و برگشت
function bounce() {
    $("#ball").animate({ left: "300px" }, 800)
              .animate({ left: "0px" }, 800, bounce);
}
bounce();

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط