آموزش کامل انیمیشن سازی با jquery با مثال های متعدد
انیمیشن سازی عناصر با jquery
در این آموزش یاد خواهید گرفت که چگونه می توان برخی از ویژگیهای CSS مانند پهنا ، ارتفاع ، حاشیه ، فاصله از بالای و چپ صفحه ، شفافیت و غیره یک عنصر را با استفاده از jQuery متحرک‌سازی کنید.
همه ویژگیهای CSS قابل متحرک‌سازی نیستند. Animate معمولاً برای متحرک‌سازی ویژگیهای عددی CSS استفاده میشود.
ساختار ()animate
ساختار کلی متحرک سازی عناصر یا animate کردن در jquery به صورت زیر است.
توضیحات مربوط به هر پارامتر:
Selector : ابتدا باید مشخص کنیم که قصد متحرک سازی چه عنصر یا سلکتوری را داریم.
Properties : این پارامتر مشخص می کند که قرار است چه ویژگی از ویژگیهای css برای متحرک سازی مورد استفاده قرار گیرد.
Duration : این پارامتر که یک پارامتر اختیاری است مدت زمان اجرای انیمیشن را مشخص می‌کند. مدت زمان را می‌توان با استفاده از یکی از رشته‌های از پیش تعریف شده مثل ‘slow’ یا ‘fast’ یا بر حسب مقادیری مانند میلی‌ثانیه مشخص کرد. مقادیر بالاتر نشان دهنده انیمیشن‌های کندتر هستند.
Callback : این پارامتر نیز یک پارامتر اختیاری است و پس از اتمام یک انیمیشن فراخوانی میشود.
انیمیشن سازی یک تصویر
مثال 1 :
در این مثال ساده یک تصویر را از موقعیت اصلی خود به اندازه 200 پیکسل به سمت راست حرکت می‌کند.
به این نکته باید توجه کرد که همه عناصر HTML به طور پیش‌فرض دارای موقعیت استاتیک هستند. بنابراین برای جابجایی یک عنصر استاتیک باید ویژگی موقعیت CSS مربوطه را روی حالت نسبی( relative)، ثابت(fixed) یا مطلق(absolute) تنظیم کنید تا امکان متحرک سازی آن وجود داشته باشد.
متحرک سازی همزمان چندین ویژگی ccs
مثال 2 :
می توانیم همزمان چندین ویژگی css یک عنصر را با استفاده از animate متحرک کنیم. بطوریکه تمام ویژگی‌ها به طور همزمان و بدون هیچ تأخیری متحرک می‌شوند.
انیمیشن‌های چندگانه تک به تک یا صف‌بندی شده
همچنین می‌توانید چندین ویژگی یک عنصر را تک به تک و به صورت جداگانه در یک صف متحرک‌سازی کنید.
مثال 3 :
ضمنا باید توجه داشته باشید برای متحرک سازی باید نام ویژگیهای CSS هنگام استفاده باید با حروف بزرگ نوشته شوند، به عنوان مثال، اگر می‌خواهید اندازه فونت را متحرک کنید، باید به جای ‘font-size’ از ‘fontSize’ استفاده کنید. یا به جای ‘marginleft’ ، باید از ‘marginLeft’ و به جای ‘margintop’ از ‘marginTop’ و غیره استفاده کنید.
ویژگیهای متحرک با Relative
مثال 4 :
ما می توانیم برای انیمیشن سازی همچنین مقادیر نسبی برای ویژگیهای css تعریف کنیم. وقتی مقداری با پیشوند =+ یا =- مشخص شده باشد، مقدار هدف با اضافه یا کم کردن عدد داده شده از مقدار فعلی ویژگی محاسبه میشود. بعبارتی مثلا با هر بار کلیک روی یک دکمه یک مقدار ثابتی که تعیین کرده ایم روی عنصر اعمال میشود.
