تأثیرات jQuery - انیمیشن

روش jQuery animate() به شما امکان می‌دهد تا انیمیشن‌های سفارشی ایجاد کنید.

نمایش تأثیر



jQuery

jQuery انیمیشن - روش animate()

روش jQuery animate() برای ایجاد انیمیشن‌های سفارشی استفاده می‌شود.

منطق:

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

ضروری params پارامتر تعریف‌کننده ویژگی‌های CSS برای انیمیشن است.

اختیاری speed پارامتر زمان اعمال تأثیر را مشخص می‌کند. می‌تواند یکی از موارد زیر باشد: "slow"، "fast" یا میلiseconds.

اختیاری callback پارامتر نام فرآیند اجرا شده در پایان انیمیشن است.

در اینجا یک مثال از کاربرد ساده animate() آورده شده است؛ این آن را به سمت چپ حرکت می‌دهد تا ویژگی left برابر با 250 پیکسل شود:

مثال

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

خود را امتحان کنید

توضیح:به طور پیش‌فرض، همه عناصر HTML یک موقعیت استاتیک دارند و قابل حرکت نیستند.

برای عمل کردن بر روی موقعیت، باید ابتدا ویژگی CSS position عناصر را به relative، fixed یا absolute تنظیم کنید!

jQuery animate() - عمل کردن بر روی چندین ویژگی

لطفاً توجه داشته باشید که در طول فرآیند تولید انیمیشن می‌توان چندین ویژگی را به طور همزمان استفاده کرد:

مثال

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

خود را امتحان کنید

توضیح:آیا می‌توان با استفاده از روش animate() همه ویژگی‌های CSS را عمل کرد؟

هوا، تقریباً می‌توان! اما، باید یک چیز مهم را به خاطر بسپاریم: هنگام استفاده از animate()، باید همه نام‌های ویژگی‌ها را به روش Camel به نوشته شوند، مثلاً، باید از paddingLeft استفاده کرد نه padding-left، از marginRight استفاده کرد نه margin-right و غیره.

همچنین، انیمیشن‌های رنگی در کتابخانه اصلی jQuery شامل نمی‌شود.

اگر می‌خواهید انیمیشن‌های رنگی ایجاد کنید، باید افزونه Color Animations را از jQuery.com دانلود کنید.

jQuery animate() - استفاده از مقادیر نسبی

همچنین می‌توانید مقادیر نسبی را تعریف کنید (این مقادیر در برابر مقدار فعلی عنصر تنظیم می‌شوند). باید مقدار را در جلو از آن قرار دهید += یا -=:

مثال

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

خود را امتحان کنید

jQuery animate() - استفاده از مقادیر پیش‌تعریف شده

شما حتی می‌توانید ارزش‌های انیمیشن را به "show"، "hide" یا "toggle" تنظیم کنید:

مثال

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

خود را امتحان کنید

jQuery animate() - استفاده از ویژگی کویوز

به طور پیش‌فرض، jQuery ویژگی کویوز برای انیمیشن‌ها را ارائه می‌دهد.

این به این معناست که اگر چندین فراخوانی animate() در کنار یکدیگر نوشته شود، jQuery یک «داخل» کویوز از فراخوانی‌های این روش ایجاد می‌کند و سپس این فراخوانی‌ها را یکی پس از دیگری اجرا می‌کند.

مثال 1

مخفی کنید، اگر می‌خواهید انیمیشن‌های مختلفی در کنار یکدیگر اجرا کنید، باید از ویژگی کویوز استفاده کنیم:

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

خود را امتحان کنید

مثال 2

مثال زیر <div> عناصر را به سمت راست حرکت می‌دهد و اندازه متن را افزایش می‌دهد:

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

خود را امتحان کنید