نحوه استفاده از انیمیشن در جی کویری

نحوه استفاده از انیمیشن در جی کوئری

پلاگین ها و کتابخانه های زیادی در جی کوئری وجود داره که شما می تونید توسط اونها از انیمیشن و جلوه های ویژه در جی کوئری استفاده کنید. اما اگر بخوایم از خود توابع و متدهای جی کوئری استفاده کنیم متد animate بهترین و پرکاربردترین متد برای ایجاد جلوه های متحرک و انیمیشن در جی کوئری هست.

آموزش استفاده از متد animate در جی کوئری

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

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

همانطوری که می بینید این متد دارای 3 پارامتر ورودی می باشد:

• پارامتر params : این پارامتر دستورات css رو می پذیرد و برای استایل دهی به کار می رود.
• پارامتر speed :  این پارامتر همانطوری که از نام آن هم پیداست سرعت اجرای انیمیشن را تعیین می کند. این پارامتر یک عدد به میلی ثانیه دریافت می کند. همچنین مقادیر "slow" و "fast" نیز می توان برای این پارامتر به کار برد.
• پارامتر callback : این پارامتر یک تایع را می پذیرد و مشخص می کند بعد از اتمام انیمیشن چه کاری باید انجام بشه.

چند تا مثال رو از متد animate در جی کوئری

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

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

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

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

استفاده از متد animate با استفاده از پارامترهای مرتبط

در مثال زیر می بینید که در هر بار اجرای متد height و width به اندازه 150px افزایش پیدا می کنه

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

نمونه های دیگه ای هم از استفاده از متد animate وجود داره که در این لینک میتونید ببینید.

با جی کوئری کارهای متحرک سازی المان ها رو میتونید انجام بدید و همچنین میتونید تغییر رنگ و اندازه و ... هم انجام بدید. پلاگین های مختلفی هم برای کار با انیمیشن در جی کوئری ایجاد شده که لیستی از این پلاگین ها رو میتونید در این لینک ببینید.