9) انیمیشن در جی کوئری (Animation)

در این بخش از تونل یادگیری جی کوئری با ایجاد افکت انیمیشنی آشنا میشویم. این افکت با اعمال تغییراتی بر روی یک عنصر در صفحه در بخشی از زمان حالت انیمیشنی به آن المان میدهد. برای استفاده از این افکت از تابع ()animate استفاده میکنیم. این تابع سینتکس زیر را دارد

تابع ()animate در جی کوئری

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

سرعت در این تابع همان حالت قبل را دارد و تنها سه ورودی fast و slow و زمان برحسب میلی ثانیه را دریافت میکند. مقدار بعد از ان که callback  است دستوراتی است که بعد از انیمیشن اجرا میشوند.

و اما مهم ترین ورودی که {params} است، شامل یک سری از دستورات است که انیمیشن ما آنها را اعمال میکند. به مثال زیر توجه کنید:

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

زمانی که بر روی دکمه(button) کلیک کنیم، div موجود در صفحه 150 پیکسل از سمت چپ فاصله میگیرد. این جابجایی در طول زمان تنظیم شده بر روی ورودی speed صورت میگیرد و به صورت انیمیشنی این اتفاق می افتد.

دستکاری چندین ویژگی انیمیشن در جی کوئری

برای این کار تعداد ویژگی ها و مقادیر ثانویه که قصد داریم بر روی عنصر اعمال بشود را به شکل زیر وارد می کنیم:

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

در مدت زمان تنظیم شده این ویژگی ها بر روی سلکتور اعمال میشود.

مقدار دهی به صورت نسبی در Jquery

هنگام مقدار دهی به صورت نسبی بر اساس مقدار اولیه ویژگی ای که میخواهیم تغییرات را اعمال کنیم حالت انیمیشنی فعال می شود. به عنوان مثال اگر عنصر ما در صفحه دارای width و hight باشد. با استفاده از مقدار دهی نسبی به میزانی که مشخص کردیم به width  و hight آن اضافه یا کم می شود.

به عنوان مثال:

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

استفاده از مقادیر شناخته شده

در این هنگام ما از سه مقدار show و hide و toggle برای تنظیم مقدار ویژگی ها استفاده می کنیم. به عنوان مثال اگر ما مقدار ارتفاع اوله توسط css تعریف کرده باشیم  مقدار hide  پس از اجرای رویداد آن را نادیده میگیرد و اعمال نمیکند. مقدار show  به صورت عکس رفتار میکند و مقدار toggle به صورت دو طرفه انجام میشود. در مثال زیر این موضوع را بهتر متوجه خواهید شد.:

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

ایجاد صف در حالت انیمیشنی جی کوئری

تابع animate در جی کوئری این امکان را به ما می دهد تا چند تغییر را پشت سر هم  یکی پس از دیگری بر روی ویژگی های سلکتور خودمان اعمال کنیم. در مثال زیر میتوانید این را مشاهده کنید:

$("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");
});