چطور با جی کوئری انیمیشن بسازیم

در این مقاله بانحوه استفاده از متد animate در جی کوئری و ساختن تصاویر متحرک با جی کوئری آشنا میشویم.

آموزش طراحی سایت

شما میتوانید با جی کوئری انیمیشن های سفارشی ایجاد کنید.

متد های ایجاد انیمیشن در جی کوئری

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

نحوه استفاده از این متد :

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

پارامتر اجباری params یک ویژگی CSS برای ایجاد متحرک می باشد.

پارامتر اختیاری speed مدت زمان افکت را بصورت Slow،Fast و یا عددی برحسب میلی ثانیه را مشخص می کند.

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

مثال زیر یک متد ساده animate() را نشان میدهد که یک تگ Div را به سمت راست جابجا می کند. تا زمانیکه میزان صفت left به 250px برسد:

مثال

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

مشاهده نتیجه

بصورت پیشفرض ، همه تگ ها در Html یک جایگاه ثابت دارند و نمی توانند جابجا شوند. بیاد داشته باشید که ویژگی موقعیت تگ را در CSS بصورت relative, fixed یا absolute مشخص شده باشد.

متد animate() چندین ویژگی را میتواند متحرک کند:

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

مشاهده نتیجه

آیا میتوان تمام ویژگی های CSS را با متد animate() متحرک کرد؟

بله تقریبا فقط به خاطر داشته باشید که باید ویژگی ها را به صورت Camel-Cased در متد animate() بکار ببرید مثلا اگر میخواهید padding-left را متحرک کنید از paddingLeft باید در متد animate() استفاده کنید.

برای متحرک کردن رنگ ها شما باید از پلاگین 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()

بطور پیشفرض جی کوئری بصورت صف بندی شده عملیات را انجام میدهد.

این بدین معنی است که اگر چندین متد 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");
});