انیمیشن های jQuery - متد ()animate

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

شکل دستوری:

پارامتر params الزامی است و خواص css را که می خواهیم متحرک کنیم، تعریف می کند.

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند.  مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر اختیاری callback  تابعی است که پس از پایان اجرای تابع fade اجرا خواهد شد.

مثال زیر روش کار متد ()animate  نشان می دهد، این متد تگ <div>  را تا زمانی که از سمت چپ 250 پیکسل فاصله داشته باشد،  به سمت راست حرکت می دهد:

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

نکته:
بطور پیش فرض، عناصر html موقعیت ثابت (static position) دارند، ونمی توانند  حرکت کنند. به یاد داشته باشید برای تغییر موقعیت، ویژگی position را در css ، relative، fixed یا  absolute تنظیم کنید.

متد ()animate -  تنظیم چند گانه ویژگی ها

توجه کنید که ویژگی های چند گانه همزمان ، متحرک و اجرا خواهند شد:

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

آیا امکان دارد تمام خواص  css را با استفاده از متد ()animate   تغییر دهیم؟
جواب مثبت است، البته نکته مهمی برای یادآوری وجود دارد: نام تمامی خواص هنگام استفاده از این متد بدون فاصله و چسبیده بهم باشند. بطور مثال شما نیاز خواهید داشت خاصیت padding-left را به صورت paddingLeft و margin-right را به صورت marginRight  بنویسید.
همچنین انیمیشن رنگ در کتابخانه اصلی جیکوئری وجود ندارد. برای اینکار می توانید   پلاگین  Color Animations plugin را از jQuery.com دانلود و  استفاده کنید.

متد ()animate – استفاده از مقادیر وابسته

دراین متد شما قادر به تعریف مقادیر وابسته هستید( این مقادیر به مقادیر عنصر جاری وابسته هستند ). این کار با قرار دادن =+ و یا =- جلوی مقدار امکان پذیر است:

مثال:

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

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

شما حتی می توانید مقدار انیمیشن  هر مقدار را  با  "show" و "hide"یا "toggle" مشخص کنید:

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

متد ()animate – استفاده از عملکرد صف

بطور پیش فرض، در jQuery  انیمیشن ها از قابلیت صف استفاده می کنند.
این به این معنی است که ، اگر چند متد ()animate بصورت پشت سرهم فراخوانی شوند، jQuery یک صف داخلی برای فراخوانی این متد ها ایجاد می کند.سپس فراخوانی انیمیشن ها را یکی پس از دیگری اجرا می کند.
بنابراین ، اگر بخواهیم انیمیشن های مختلفی را پس از دیگری اجرا کنیم، از عملکرد صف بهره می بریم:

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

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

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