قسمت ششم: افکت‌ها (انیمیشن)

در قسمت قبل از دوره آموزش کتابخانه جی کوئری با اسلایدها و متدهای مربوط به آن ها آشنا شدیم و همچنین کمی در مورد متد انیمیت و نحوه تعریف انیمیشن های اختصاصی در جی کوئری صحبت کردیم. در این قسمت می خواهیم به طور کامل به انیمیشن ها و متد انیمیت بپردازیم و آن را بررسی کنیم.

متد Animate

همانطور که در قسمت قبل گفتیم این متد سه پارامتر دریافت می کند که دو پارامتر آن همان speed،callback است که با آن ها آشنایی دارید.

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

پارامتر اول ویژگی های css است که می خواهید برای عنصر خود تعریف کنید تا با اجرای انیمیشن ویژگی های پیشفرض آن به ویژگی های css که در این پارامتر برای آن تعریف کرده ایم، تغییر کند و به این صورت انیمیشن اختصاصی ما اجرا شود.

برای این کار یک مثال می زنیم. در مثال زیر برای دکمه ها یک متد کلیک تعریف کرده ایم و در تابع آن برای تمامی تگ های div یک انیمیشن را مشخص و در پارامتر آن 250 پیکسل فاصله از سمت چپ را تعیین کرده ایم. در این صورت با کلیک بر روی دکمه عنصر div ما از سمت چپ 250 پیکسل فاصله می گیرد.

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

به یاد داشته باشید که عناصر html به صورت پیشفرض دارای پوزیشن statc هستند و نمی توانند حرکت کنند. برای همین باید در ابتدا پوزیشن آن ها را در css روی related،fixed یا absolut قرار دهید.

استفاده از چند انیمیشن در متد animate

شما می توانید به جای یک تغییر در استایل عنصر مورد نظر، چند تغییر ایجاد کنید و انیمیشن اختصاصی خود را بسازید.

برای مثال در کد زیر ما ابتدا عنصر را از سمت چپ 250 پیکسل فاصله می دهیم، شفافیت آن را به 50% کاهش می دهیم، ارتفاع آن را برابر با 150 پیکسل و عرض آن را برابر با 150 پیکسل قرار می دهیم.

در این مثال با کلیک بر روی دکمه تابع اجرا می شود و تمامی این تغییرات برای عنصر div ما اتفاق می افتد:

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

سوال: آیا می شود تمامی ویژگی های css را با استفاده از متد animate تغییر داد؟

پاسخ: بله، شما می توانید با استفاده از متد animate تمامی ویژگی های مربوط به css را از جمله padding ،margin ،background، ارتفاع و... را تغییر دهید. نکته ی مهم در اینباره این است که برای نوشتن ویژگی های css که از دو بخش تشکیل شده اند مانند padding left به جای استفاده از خط فاصله که در css استفاده می کردیم، دو کلمه را به هم می چسبانیم و حرف اول کلمه دوم را به صورت بزرگ می نویسم. مانند: marginRight

باید به یاد داشته باشدی که انیمیشن های مربوط به رنگ ها به صورت پیشفرض در کتابخانه جی کوئری وجود ندارد و اگر می خواهید انیمیشن های مربوط به رنگ ها و به اصلاح color animate ایجاد کنید، باید پلاگین مربوط به انیمیشن های رنگ از لینک زیر دانلود کنید و به سند html خود اضافه کنید.

http://plugins.jquery.com/

استفاده از مقادیر نسبتی در متد animate

شما می توانید به جای استفاده از مقادیر مطلق در تعیین ویژگی های css برای عناصر خود از ویژگی های نسبتی استفاده کنید. یعنی مثلا بگویید که ارتفاع عنصر مورد نظر را 100 پیکسل افزایش بده!

ساختار استفاده از این نوع مقادیر به صورت استفاده از یک علامت + یا – به معنی افزایش یا کاهش و یک علامت = است. در مثال زیر می بینیم که ارتفاع و عرض عنصر مورد نظر از آنچه که بوده 150 پیکسل بیشتر می شود.

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

مقادیر از پیش تعیین شده در متد animate

شما می توانید به جای استفاده از مقادیر عددی در متد از کلمات از پیش تعیین شده مانند show و hide و toggle استفاده کنید. مانند نمونه زیر که با کلیک بر روی عنصر div انیمیشنی برای تغییر وضعیت ارتفاع دریافت می کند:

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

استفاده از انیمیشن ها به صورت صف در متد animate

شما می توانید در تابعی که در آن متدهای animate را قرار می دهید، چندین متد animate را کنار هم قرار دهید و این متدها به ترتیب از بالا به پایین اجرا خواهند شد.

همچین می توانید به جای هر بار select کردن عنصر یک بار آن را درون یک متغییر بریزید و سپس هر بار با صدا زدن آن متغیر، به عنصر select شده اشاره کنید. این نکته را در مثال زیر می بینید که با کلیک بر روی دکمه، تابعی اجرا می شود. در ابتدا متغیری به نام div تعریف شده و با select کردن تمام تگ های div درون متغیر div ریخته شده است و سپس در خط های بعد برای متغیر div، 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");
});

در این قسمت از دوره آموزشی کتابخانه جی کوئری به انیمیشن ها و ویژگی های مربوط به آن ها پرداختیم و همچنین با صف انیمیشن ها آشنا شدیم، قسمت بعدی آخرین قسمت از مبحث افکت ها و انیمیشن ها خواهد بود. با ما همراه باشید.