میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

افکت‌ها (انیمیشن) در جی کوئری

۶۱ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با افکت‌ها (انیمیشن) در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.

 

متد Animate

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

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

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

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

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

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

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

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

برای مثال در کد زیر ما ابتدا عنصر را از سمت چپ ۲۵۰ پیکسل فاصله می دهیم، شفافیت آن را به ۵۰% کاهش می دهیم، ارتفاع آن را برابر با ۱۵۰ پیکسل و عرض آن را برابر با ۱۵۰ پیکسل قرار می دهیم.

در این مثال با کلیک بر روی دکمه تابع اجرا می شود و تمامی این تغییرات برای عنصر 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 خود اضافه کنید.

 

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

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

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

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

امیدواریم آموزش افکت‌ها (اسلاید) در جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟