در بخش قبلی افکت 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() جی کوئری بصورت زیر است.
|
1 |
$(selector).animate({ properties }, duration, callback); |
معنای هر کدام از پارامتر های متد animate() :
- پارامتر ضروری
propertiesنشان دهنده خصوصیت css ی که متحرک (animation) می شود. - مقدار اختیاری
durationنیز مشخص می کند چه مقدار این انیمیشن طول بکشد. مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘slow’ یا ‘fast’ , یا عددی در میلی ثانیه برای دقت بیشتر یا انیمیشن های آرام تر استفاده کنید. - مقدار اختیاری
callbackنیز یک تابع را دریافت می کند که بعد از یکبار اجرای انیمیشن, صدا زده می شود.
اینجا یک مثال ساده از افکت انیمیشن jQuery با متد animate() که یک تصویر را با کلیک روی دکمه از موقعیت اصلی به طول ۳۰۰ پیکسل به سمت راست انتقال می دهد.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("img").animate({ left: 300 }); }); }); </script> |
نکته: همه عناصر HTML یک موقعیت ثابت (static) را بصورت پیش فرض دارند. از آنجا که عنصر ثابت نمی تواند حرکت داده شود, پس نیاز است که خصوصیت position برای برای المان را یکی از مقادیر relative, fixed یا absolute قرار بدید تا امکان متحرک سازی آن ایجاد شود.
متحرک سازی یکباره چندین خصوصیت
همچنین می توانید بصورت یکباره چندین خصوصیت یک المان را در یک زمان با متد animate() تغییر بدید.
انیمیشن روی همه خصوصیات بصورت همزمان و بدون هیچ گونه وقفه, انجام می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".box").animate({ width: "300px", height: "300px", marginLeft: "150px", borderWidth: "10px", opacity: 0.5 }); }); }); </script> |
نکته اول: هنگام اعمال افکت انیمیشن jQuery و استفاده از متد animate() برای نام خصوصیات CSS باید بصورت camel-case نوشته شود. برای مثال اگر قصد استفاده از font-size را دارید باید بصورت fontSize بنویسد. همچنین به جای margin-left از marginLeft و به جای border-width از borderWidth .
نکته دوم : شما باید قبل از اعمال انیمیشن روی خصوصیت border-width , حتما خصوصیت border-style المان را ست کرده باشید. یک عنصر باید قبل از اعمال انیمیشن روی عرض border آن حتما border داشته باشد چرا که بصورت پیش فرض مقدار border-style برابر none می باشد.
متحرک سازی یک به یک چندین خصوصیت یا صف بندی انیمیشن ها
می توانید چندین خصوصیت یک المان را بصورت تک به تک در یک صف با قابلیت زنجیره ای جی کوئری, متحرک کنید. در بخش های بعدی بیشتر در مورد قابلیت زنجیره متدها صحبت می کنیم.
مثال زیر یک انیمیشن زنجیره ای یا صف بندی شده را نشان می دهد که هر انیمیشن بعد از تکمیل انیمیشن قبلی شروع می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".box") .animate({width: "300px"}) .animate({height: "300px"}) .animate({marginLeft: "150px"}) .animate({borderWidth: "10px"}) .animate({opacity: 0.5}); }); }); </script> |
متحرک سازی خصوصیات با مقادیر نسبی
می توانید مقادیر نسبی برای خصوصیت انیمیشن مشخص کنید. اگر مقدار مشخص شده دارای پیشوند += یا -= باشد, پس مقدار هدف با افزودن یا کاهش مقدار داده شده از مقدار فعلی خصوصیت, محاسبه می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".box").animate({ top: "+=50px", left: "+=50px", width: "+=50px", height: "+=50px" }); }); }); </script> |
متحرک سازی خصوصیات با مقادیر از پیش تعریف شده
به علاوه خصوصیات عددی, هر خصوصیت (property) می تواند مقادیر رشته ‘show’, ‘hide’, ‘toggle’ را بگیرد.
این قابلیت هم در شرایطی که به سادگی می خواهید خصوصیت را از یک مقدار فعلی به مقدار اولیه و برعکس, متحرک کنید, مفید است.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".box").animate({ width: 'toggle' }); }); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از افکت انیمیشن jQuery نهایت استفاده را برده باشید.
در بخش بعدی با متوقف کردن انیمیشن جی کوئری, آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
