متحرک سازی در jQuery
متد ()animate، برای متحرک سازی در jQuery استفاده می شود.
متد ()animate - متحرک سازی در jQuery
متد ()animate، برای متحرک سازی در jQuery استفاده می شود.
نحوه استفاده:
پارامترها:
پارامتر | توضیح |
---|---|
params |
الزامی است، یک یا چند خصوصیت دلخواه CSS برای متحرک سازی است. |
speed |
اختیاری است، سرعت متحرک سازی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
callback |
اختیاری است، تابعی است که بعد از اجرای کامل متد ()animate اجرا می شود. |
در مثال زیر، با استفاده از متد ()animate یک عنصر <div> را حرکت می دهیم تا خصوصیت left آن برابر با "250px" شود:
مثال (متحرک سازی در jQuery)
$("div").animate({left:'250px'});
});
بصورت پیشفرض تمام عناصر HTML دارای یک مکان استاتیک هستند و نمی توانند حرکت داده شوند. |
تنظیم چند خصوصیت CSS در متد ()animate
خصوصیت ها به طور همزمان برای متحرک سازی اعمال می شوند:
مثال (متحرک سازی در jQuery)
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
آیا تمام خصوصیت های CSS را می توان در متد ()animate استفاده نمود؟ تقریباً بله! اما یک نکته مهم وجود دارد: برای استفاده از خصوصیت های CSS در متد ()animate باید آنها را "دنبال هم" نوشت. مثلاً بجای padding-right از paddingRight و یا بجای margin-left از marginLeft استفاده نمود. |
مقدار دهی نسبی در متد ()animate
می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود. برای انجام این کار هنگام مقدار دهی از "=+" یا "=-" استفاده کنید:
مثال (متحرک سازی در jQuery)
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
تنظیم مقادیر از پیش تعریف شده در متد ()animate
شما حتی می توانید خصوصیت ها را با مقادیر "show", "hide" و یا "toggle" مقداردهی کنید:
مثال (متحرک سازی در jQuery)
$("div").animate({
height:'toggle'
});
});
قابلیت صف کردن چندین متد ()animate
اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند.
بنابراین اگر می خواهید متحرک سازی های مختلفی را یکی بعد از دیگری اجرا کنید، بهتر است از قابلیت صف در jQuery استفاده کنید:
مثال 1
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
در مثال زیر، ابتدا عنصر <div> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد:
مثال 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery Effects Reference
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 24942