متحرک سازی

متحرک سازی

متد ()animate، برای متحرک سازی در jQuery استفاده می شود.

متد ()animate – متحرک سازی در jQuery

متد ()animate، برای متحرک سازی در jQuery استفاده می شود.

نحوه استفاده:

$(selector).animate({params},speed,callback);

پارامترها:

پارامتر توضیح
params الزامی است، یک یا چند خصوصیت دلخواه CSS برای متحرک سازی است.
speed اختیاری است، سرعت متحرک سازی را مشخص می کند و می تواند با مقادیر “slow”، “fast” و یا میلی ثانیه مقدار دهی شود.
callback اختیاری است، تابعی است که بعد از اجرای کامل متد ()animate اجرا می شود.

در مثال زیر، با استفاده از متد ()animate یک عنصر <div> را حرکت می دهیم تا خصوصیت left آن برابر با “۲۵۰px” شود:

مثال

$(“button”).click(function(){
$(“div”).animate({left:’250px’});
}); 
بصورت پیشفرض تمام عناصر HTML دارای یک مکان استاتیک هستند و نمی توانند حرکت داده شوند.
همانطور که در آموزش CSS گفته شد، برای دستکاری مکان یک عنصر، باید خصوصیت position آنرا با یکی از مقادیر: fixed، absolute و یا relative مقداردهی نمود.

تنظیم چند خصوصیت CSS در متد ()animate

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

مثال

$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
}); 

آیا تمام خصوصیت های CSS را می توان در متد ()animate استفاده نمود؟

تقریباً بله! اما یک نکته مهم وجود دارد: برای استفاده از خصوصیت های CSS در متد ()animate باید آنها را “دنبال هم” نوشت. مثلاً بجای padding-right از paddingRight و یا بجای margin-left از marginLeft استفاده نمود.

همچنین متحرک سازی براساس رنگ، در هسته کتابخانه jQuery اضافه نشده است.
اگر می خواهید براساس رنگ ها متحرک سازی کنید، باید در سایت jQuery.com پلاگین مورد نظر را دانلود کنید.
(Color Animations plugin)


مقدار دهی نسبی در متد ()animate

می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود. برای انجام این کار هنگام مقدار دهی از “=+” یا “=-” استفاده کنید:

مثال

$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
height:’+=150px’,
width:’+=150px’
});
}); 

تنظیم مقادیر از پیش تعریف شده در متد ()animate

شما حتی می توانید خصوصیت ها را با مقادیر “show”, “hide” و یا “toggle” مقداردهی کنید:

مثال

$(“button”).click(function(){
$(“div”).animate({
height:’toggle’
});
}); 

قابلیت صف کردن چندین متد ()animate

اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند.

بنابراین اگر می خواهید متحرک سازی های مختلفی را یکی بعد از دیگری اجرا کنید، بهتر است از قابلیت صف در jQuery استفاده کنید:

مثال ۱

$(“button”).click(function(){
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> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد:

مثال ۲

$(“button”).click(function(){
var div=$(“div”);
div.animate({left:’100px’},”slow”);
div.animate({fontSize:’3em’},”slow”);
}); 


اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google