سبد (0)

متحرک سازی در jQuery

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

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

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

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

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

پارامترها:

پارامتر توضیح
params

الزامی است، یک یا چند خصوصیت دلخواه CSS برای متحرک سازی است.
speed

اختیاری است، سرعت متحرک سازی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.
callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()animate اجرا می شود.

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

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 
خودتان امتحان کنید »
lamp

بصورت پیشفرض تمام عناصر HTML دارای یک مکان استاتیک هستند و نمی توانند حرکت داده شوند.
همانطور که در آموزش CSS گفته شد، برای دستکاری مکان یک عنصر، باید خصوصیت position آنرا با یکی از مقادیر: fixed، absolute و یا relative مقداردهی نمود.

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

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

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
خودتان امتحان کنید »
lamp

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

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

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

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

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

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 
خودتان امتحان کنید »

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

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

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 
خودتان امتحان کنید »

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

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

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

مثال 1

$("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> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد:

مثال 2

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
}); 
خودتان امتحان کنید »

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

نوشته شده توسط امیر پهلوان صادق
بازدید: 24937

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه