این متد به شما اجازه می دهد انیمیشن مورد نظرتان را بسازید

متد animation():

فرمول این متد بصورت زیر است :

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

پارامتر params : پارامترهایی را که می خواهید متحرک کنید مشخص می کند

پارامتر speed:

سرعت اجرای انیمیت را مشخص می کند و می تواند مقادیر زیر را داشته باشد :

"slow", "fast", or milliseconds

Milliseconds عددی بر حسب میلی ثانیه خواهد بود که مورد نظر شماست

پرامتر callback :

نام تابعی است که می خواهید دستورات ان بعد از اتمام کامل انیمیت اجرا شود .

مثال :

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

هرگاه روی دکمه ای از نوع button کلیک کردیم جلوه انیمیشن روی محتویات تگ div انجام شود و ...

 مشاهده و اجرای برنامه کامل

تذکر مهم :

از انجائیکه کد های html محتوای ایستا یی را در صفحه وب ایجاد می نمایند لذا باید این محتوا را توسط سی اس اس نمایش دهید تا بتوان ویژگیهای سی اس اس انها را با متد animation متحرک نمود . و مشخص نمائید موقعیت این ویژگیها از نوع

 position: absolute;

یا

 position :relative;

یا

 position: fixed;

هستند

 

مثال :

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

در مثال بالا بعد از فشردن دکمه button ، محتویات تمام تگ های div موجود در صفحه وب با جلوه متحرک به سمت چپ حرکت کرده و در موقعیت 250px از سمت چپ صفحه قرار می گیرند .

 

روش متحرک کردن چندین ویژگی بصورت همزمان:

مثال :

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

بعد از فشردن هر دکمه از نوع button در صفحه وب ، محتویات تمام تگ های  div صفحه وب ، به سمت قرار گیری در موقعیت جدیدی که درون {} مشخص شده اند متحرک می شوند :

یعنی بصورت همزمان محتویات به سمت چپ حرکت کرده تا در مکان 250 پیکسلی از سمت چپ صفحه قرار بگیرند

و شفافیت موضوعات درون تگ div هم به سمت مقدار 0.5 میل می کند و ارتفاع تگ div هم به 150 پیکسل و عرض تگ div هم به 150 پیکسل می رسد .

مشاهده و اجرای برنامه کامل

آیا می توان تمام خصوصیات سی اس اس را متحرک نمود ؟

جواب : بله – ولی ویزگیهایی که بین اسم آنها علامت منها دارند مثل mergin-right  یا padding-left باید علامت منها را حذف نمود و حرف اول کلمه بعد از منها را با حرف بزرگ نوشت .مثل marginRight یا paddingLeft.

در ضمن انیمیت حرکت ویژگی color در کتابخانه jquery وجود ندارد 

مثال :

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

در این مثال بعد از فشردن هر دکمه button در صفحه وب محتوای تگ های div صفحه وب متحرک می شوند

دستور left:'250px'

موقعیت محتوای تگ div را بصورت انیمیشنی در فاصله 250 پیکسلی از سمت چپ صفحه قرار می دهد

دستور height:'+=150px'

به ارتفاع فعلی تگ div و محتویات ان 150 پیکسل می افزاید

    width:'+=150px'

به عرض فعلی تگ div و محتویات ان 150 پیکسل می افزاید .

مشاهده و اجرای برنامه کامل

شما همچنین می توانید متدهایی مثل show , hide, toggle را انیمیشن سازی کنید.

مثال :

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 

در این مثال بعد از کلیک روی دکمه button  در صفحه وب محتویات تگهای  div انیمیشن سازی می شوند و حالت نمایش یا مخفی شدن انها متحرک می شود .

 مشاهده و اجرای برنامه کامل

اجرای انیمیشن های پشت سر هم :

اگر برای یک عنصر چندین متد animation بنویسید یکی بعد از دیگری اجرا می شوند :

مثال :

$("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 که به تگ های div اشاره دارد تعریف شده است .

ابتدا انیمیشن خط سوم روی تگ div اعمال می شود

سپس انیمیشن خط چهارم سپس خط پنجم و در نهایت انیمیشن خط ششم روی تگ div اجرا می شوند .

مشاهده و اجرای برنامه کامل

مثال :

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

در مثال بالا ابتدا عنصر div به سمت راست حرکت می کند و سپس اندازه قلم آن تغییر می کند .

 مشاهده و اجرای برنامه کامل