افکت‌های jQuery - انیمیشن

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

نمایش اثر



jQuery

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

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

منظور از آن این است:

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

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

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

اختیاری callback پارامتر نام تابعی است که پس از اتمام انیمیشن اجرا می‌شود.

در اینجا یک مثال برای استفاده ساده از متد animate() آورده شده است؛ این متد عناصر <div> را به سمت چپ حرکت می‌دهد تا ویژگی 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()، باید تمام نام‌های ویژگی‌ها را به صورت CamelCase بنویسیم، به عنوان مثال، باید از 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");
});

آزمایش شخصی کنید