50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش جی کوئری – افکت انیمیشن jQuery

  • منتشر شده در تاریخ

آموزش جی کوئری

در بخش قبلی افکت Sliding در jQuery را بررسی کردیم. در این قسمت از سری آموزش جی کوئری و افکت ها, به افکت انیمیشن jQuery می پردازیم.

 

متد animate() جی کوئری

افکت انیمیشن jQuery برای ساخت انیمیشن های سفارشی استفاده می شود.

متد animate() معمولا برای متحرک سازی خصوصیات عددی CSS مثل width, height, margin, padding, opacity, top, left استفاده می شود اما خصوصیات غیرعددی مثل color یا background-color با قابلیت های ساده jQuery امکان متحرک سازی آنها نیست.

نکته: همه خصوصیت CSS قابلیت متحرک سازی را ندارند. بطور کلی, هر خصوصیت CSS که مقادیر عددی, طول, درصد یا رنگ ها قابل متحرک سازی هستند. به هر حال, انیمیشن color توسط هسته کتابخانه jQuery قابل انجام نیست و می توانید از پلاگین jQuery color plugin استفاده کنید.

 

 شکل نوشتاری (Syntax)

سینتکس ساده متد animate() جی کوئری بصورت زیر است.

معنای هر کدام از پارامتر های متد animate() :

  • پارامتر ضروری properties نشان دهنده خصوصیت css ی که متحرک (animation) می شود.
  • مقدار اختیاری duration نیز مشخص می کند چه مقدار این انیمیشن طول بکشد. مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘slow’ یا ‘fast’ , یا عددی در میلی ثانیه برای دقت بیشتر یا انیمیشن های آرام تر استفاده کنید.
  • مقدار اختیاری callback نیز یک تابع را دریافت می کند که بعد از یکبار اجرای انیمیشن, صدا زده می شود.

اینجا یک مثال ساده از افکت انیمیشن jQuery با متد animate() که یک تصویر را با کلیک روی دکمه از موقعیت اصلی به طول ۳۰۰ پیکسل به سمت راست انتقال می دهد.

نکته: همه عناصر HTML یک موقعیت ثابت (static) را بصورت پیش فرض دارند. از آنجا که عنصر ثابت نمی تواند حرکت داده شود, پس نیاز است که خصوصیت position برای برای المان را یکی از مقادیر relative, fixed یا absolute قرار بدید تا امکان متحرک سازی آن ایجاد شود.

 

متحرک سازی یکباره چندین خصوصیت

همچنین می توانید بصورت یکباره چندین خصوصیت یک المان را در یک زمان با متد animate() تغییر بدید.

انیمیشن روی همه خصوصیات بصورت همزمان و بدون هیچ گونه وقفه, انجام می شود.

نکته اول: هنگام اعمال افکت انیمیشن jQuery و استفاده از متد animate() برای نام خصوصیات CSS باید بصورت camel-case نوشته شود. برای مثال اگر قصد استفاده از font-size را دارید باید بصورت fontSize بنویسد. همچنین به جای margin-left از marginLeft و به جای border-width از borderWidth .

نکته دوم : شما باید قبل از اعمال انیمیشن روی خصوصیت border-width , حتما خصوصیت border-style المان را ست کرده باشید. یک عنصر باید قبل از اعمال انیمیشن روی عرض border آن حتما border داشته باشد چرا که بصورت پیش فرض مقدار border-style برابر none می باشد.

 

متحرک سازی یک به یک چندین خصوصیت یا صف بندی انیمیشن ها

می توانید چندین خصوصیت یک المان را بصورت تک به تک در یک صف با قابلیت زنجیره ای جی کوئری, متحرک کنید. در بخش های بعدی بیشتر در مورد قابلیت زنجیره متدها صحبت می کنیم.

مثال زیر یک انیمیشن زنجیره ای یا صف بندی شده را نشان می دهد که هر انیمیشن بعد از تکمیل انیمیشن قبلی شروع می شود.

 

متحرک سازی خصوصیات با مقادیر نسبی

می توانید مقادیر نسبی برای خصوصیت انیمیشن مشخص کنید. اگر مقدار مشخص شده دارای پیشوند += یا -= باشد, پس مقدار هدف با افزودن یا کاهش مقدار داده شده از مقدار فعلی خصوصیت, محاسبه می شود.

 

متحرک سازی خصوصیات با مقادیر از پیش تعریف شده

به علاوه خصوصیات عددی, هر خصوصیت (property) می تواند مقادیر رشته ‘show’, ‘hide’, ‘toggle’ را بگیرد.

این قابلیت هم در شرایطی که به سادگی می خواهید خصوصیت را از یک مقدار فعلی به مقدار اولیه و برعکس, متحرک کنید, مفید است.

 

امیدوارم در این بخش آموزش جی کوئری, از افکت انیمیشن jQuery نهایت استفاده را برده باشید.

در بخش بعدی با متوقف کردن انیمیشن جی کوئری, آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی