سلام دوستان گرامی ، حال شما خوبه ؟ همانطورکه میدانید با اموزش jquery در خدمت شما هستم .در این مبحث به ساخت انیمیشن میپردازیم.
در مباحث پیشین، ایفکت های نمایش اسلایدی و پنهان سازی تدریجی را که امکانات درون ساخته ی این کتابخانه ی جاوا اسکرپیت هستند ، تشریح کردیم. به کمک متد animate()، می توان animation های سفارشی ایجاد نمود. به طوری که تمامی خواص عددی CSS یک المان توسط این متد قابل مدیریت و دستکاری می باشد. با این متد می توان به طور مثال، یک کادر را به آرامی بر روی صفحه به حرکت درآورد یا به آن قابلیت پرش به بالا و پایین اعمال نمود.

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲

$(function () {
$(“#divTestBox1”).animate(
{
“left”: “500px”
}
);
});

اولین و تنها پارامتر الزامی متد animate()، مجموعه خواص CSS است که مایلید تغییر دهید. در این مثال، یک المان div با موقعیت absolute داریم که با کمک متد animate() جی کوئری به آن دستور می دهیم زمانی که مقدار خاصیت left سی اس اس آن به ۲۰۰ پیکسل رسید، آن را متوقف کند.

دومین پارامتر به شما این امکان را می دهد تا سرعت اتمام انیمیشن و متحرک سازی را بر حسب میلی ثانیه یا با پاس دادن مقادیر”slow” یا”fast” (به ترتیب معادل ۶۰۰ یا ۲۰۰ میلی ثانیه) به متد یاد شده، تنظیم نمایید. با این دستور می توان سرعت حرکت کادر سبز رنگ بر روی صفحه را کاهش دهیم.

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(function () {
$(“#divTestBox2”).animate(
{
“left”: “200px”
},
۵۰۰۰
);
});

سومین پارامتر که به متد animate() ارسال می شود یک تابع callback است که به محض اتمام انیمیشن صدا زده می شود. این امکان در اجرای یک سری انیمشن مختلف به صورت پشت سرهم بسیار مفید واقع می شود. مثال:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷

$(function () {
$(“#divTestBox3”).animate(
{ “left”: “100px” },
۱۰۰۰,
function () {
$(this).animate(
{ “left”: “20px” },
۵۰۰,
function () {
$(this).animate({ “left”: “50px” }, 500);
}
)
}
);
});

در این نمونه، متد animate را فراخوانی کرده و خاصیت left المان دارای شناسه ی “divTestBox3” را به عنوان پارامتر به آن پاس داده ایم. سپس از آن خواستیم تا زمانی که مقدار این خاصیت به ۱۰۰ پیکسل نرسیده، انیمیشن را ادامه دهد. همچنین سرعت اتمام انیمیشن را ۱ ثانیه (۱۰۰۰ میلی ثانیه) مشخص کرده ایم که با به پایان رسیدن آن بلافاصله انیمیشن دیگری آغاز می گردد. انیمیشن دوم، همان طور که از کد مشخص است، المان مزبور را به اندازه ی ۲۰ پیکسل و در طی نیم ثانیه به عقب برمی گرداند. بار دیگر با خاتمه یافتن انیمیشن دوم، انیمیشن دیگری شروع می شود که در آن المان به سمت راست رانده شده تا مقدار خاصیت left بر روی ۵۰ تنظیم گردد.

با این حال، از آنجایی که jQuery دارای امکان صف بندی برای اجرای animation ها می باشد، می توانید مثال بالا را بسیار ساده تر پیاده سازی کنید. ناگفته نماند که این امکان بیشتر زمانی بکار می آید که بخواهید چندین انیمیشن به صورت پشت سرهم اجرا نمایید. اگر بخواهید زمانی که animation به پایان رسید، اتفاق دیگری رخ دهد، مثال ذکر شده در بالا باز روش مناسب می باشد. نسخه ی صف بندی شده ی انیمیشن بالا را در مثال زیر مشاهده می کنید (انیمیشن ها پشت سرهم اجرا می شوند):

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷

$(function () {
$(“#divTestBox4”).animate({ “left”: “100px” }, 1000);
$(“#divTestBox4”).animate({ “left”: “20px” }, 500);
$(“#divTestBox4”).animate({ “left”: “50px” }, 500);
});