استفاده کردن از انیمیشن ها در jQuery

بررسی متد Animate در jQuery

به سادگی با استفاده از متد animate در jQuery می‌توانیم یک animation سفارشی را بر روی style property های مربوط به یک element اعمال کنیم. در واقع عملکرد این متد به اینگونه است که style property های موجود برای یک element را به سمت style property های لحاظ شده به همراه یک animation تغییر خواهد داد. به منظور استفاده کردن از این متد ابتدا می بایست در قالب یک‌ selector اقدام به انتخاب کردن element های مورد نظر کنیم و سپس متد animate را صدا بزنیم. به عنوان پارامتر ورودی به متد animate باید یک JSON object که شامل style property ها و سرعت animation و همچنین دیگر گزینه‌های مورد نیاز است استفاده کنیم. کدی که در قسمت زیر مشاهده می کنید مثالی از syntax مربوط به استفاده کردن از متد animate را نشان می دهد. [snippet]
$(‘selector expression’).animate({ stylePropertyName : ‘value’},
duration,
easing,
callback);
$(‘selector expression’).animate({ propertyName : ‘value’},{ options });
[/snippet]
حال در قالب مثال هایی نحوه استفاده کردن از متد animate را با یکدیگر بررسی خواهیم کرد. در مثال بالا style property های height و width مربوط به یک element را به همراه متد animate تغییر داده‌ایم. علاوه بر این می توانیم مدت زمان مربوط به یک animation را به واحد میلی ثانیه به عنوان پارامتر دوم به متد animate تحویل بدهیم. این موضوع در کد زیر نشان داده شده است.
$('#myDiv').animate({
height: '200px',
width: '200px'
});

<div id="myDiv" class="redDiv">
</div>

موضوع دیگر اضافه کردن easing method می باشد. به منظور لحاظ کردن یک easing method می‌توانید از دو function که درjQuery وجود دارند استفاده کنید. این دو function به نام‌هایlinear و swing می باشند که می توانید به راحتی به عنوان یک پارامتر از نوعstring به متد animate تحویل بدهید. این easing method ها به منظور انجام transition و animation مورد استفاده قرار می‌گیرند. کدی که در قسمت زیر مشاهده می کنید استفاده کردن از یک easing method به نام swing را نشان می‌دهد.
$('#myDiv').animate({
height: '200px',
width: '200px'
},
5000);

<div id="myDiv" class="redDiv">
</div>

لحاظ کردن یک Callback Function در زمان کامل شدن یک Animation

روش دیگر اضافه کردن یک callback function است که می‌توانید در زمان تکمیل شدن عملیات animation آن را اجرا کنید. کدی که در قسمت زیر مشاهده می کنید این موضوع نشان می‌دهد.
$('#myDiv').animate({
height: '200px',
width: '200px'
},
5000,
function () {
$('#msgDiv').append('Animation completed');
});
});

<div id="myDiv" class="redDiv">
</div>

<div id="msgDiv"></div>

موضوع دیگر لحاظ کردن گزینه ها و یا option های دیگر در قالب یک باره یک JSON object و تحویل دادن آن به متد animate می‌باشد. گزینه‌هایی که می‌توانید در این JSON object قرار بدهید شامل duration و easing و queue و step و progress و complete و start و done و always می باشد. البته می توانید با رجوع کردن به مستندات jQuery جزئیات مربوط به هر کدام از این موارد را به طور دقیق تری بررسی کنید. کدی که در قسمت زیر مشاهده می کنید دقیقاً همین موضوع را نشان می دهد.
$('#myDiv').animate({
height: '200px',
width: '200px'
},
{ // options parameter
duration: 5000,
complete: function () {
$(this).animate({
height: '100px',
width: '100px'
}, 5000,
function () {
$('#msgDiv').text('Animation completed..');
});
},
start: function () {
$('#msgDiv').append('starting animation..');
}
});

<div id="msgDiv"></div>

<div id="myDiv" class="redDiv">
</div>

بررسی متد Queue در jQuery

کلمه queue در زبان فارسی به صف ترجمه می شود. با استفاده از این متد می‌توانیم سطح مربوط بهeffect هایی که قرار است بر روی یک element اجرا بشوند را نشان دهیم و یا حتی آن را تغییر بدهیم. کدی که در قسمت زیر مشاهده می کنید syntax مربوط به استفاده کردن از این متد را نشان می دهد. [snippet]
$(‘selector expression’).queue();
[/snippet]
کدی که در قسمت زیر می بینید مثالی از نحوه استفاده کردن از این متد را نشان می‌دهد.
$('#myDiv').toggle(500);
$('#myDiv').fadeOut(500);
$('#myDiv').fadeIn(500);
$('#myDiv').slideDown(500);
$('#msgDiv').append('Animation functions: ' + $('#myDiv').queue().length);

<div id="msgDiv"></div>

<div id="myDiv" class="redDiv">
</div>

بررسی متد FadeIn در jQuery

با استفاده از متد fadeIn می‌توانیم element های مورد نظرمان را با یک حالت fading پدیدار کنیم. کدی در قسمت زیر مشاهده می کنید syntax مربوط به استفاده کردن از این متد را نشان می‌دهد. [snippet]
$(‘selector expression’).fadeIn(speed, easing, callback);
[/snippet]
ضمناً مثال زیر نحوه استفاده کردن از این متد برای پدیدار کردن یک element را نشان می‌دهد.
$('#myDiv').fadeIn(5000, function () {
$('#msgDiv').append('fadeIn() completed.')
});

<div id="myDiv" class="redDiv">
</div>

<div id="msgDiv"></div>

بررسی متد FadeOut

متد fadeOut دقیقا شبیه به متد fadeIn عمل می کند؛ منتها با این تفاوت که یک element را با یک حالت fading مخفی خواهد کرد. قسمت زیر syntax مربوط به استفاده کردن از این متد را نشان می دهد. [snippet]
$(‘selector expression’).fadeOut(speed, easing, callback);
[/snippet]
کدی که در قسمت زیر مشاهده می کنید مثالی از نحوه استفاده کردن از این متد را نشان می‌دهد.
$('#div1').fadeOut(5000, function () {
$('#msgDiv').append('fadeOut() completed.')
});

<div id="msgDiv"></div>

<div id="myDiv" class="redDiv">
</div>

بررسی متدهای Show و Hide در jQuery

با استفاده از متدهای show و hide می توانید element های انتخاب شده را مخفی و یا پدیدار کنید. در روند انجام این کار می توانید سرعت و easing method و همچنین یک callback function که در زمان تکمیل شدن عملیات مربوط به متدهای show و hide اجرا می‌شود را لحاظ بفرمایید. قسمت زیر syntax مربوط به استفاده کردن از متدهای show و hide را نشان می‌دهد. [snippet]
$(‘selector expression’).hide(speed, easing, callback);
$(‘selector expression’).show(speed, easing, callback);
[/snippet]
کد زیر مثالی از نحوه استفاده کردن از این متدها را نشان می‌دهد.
$('#div1').hide(500, function () {
$('#msgDiv').append('Red div is hidden.')
});

$('#div2').hide(500, function () {
$('#msgDiv').append('Yellow div is hidden.')
});

<div id="div1" class="redDiv">
</div>

<div id="div2" class="yellowDiv">
</div>

بررسی متد Toggle در jQuery

با استفاده از متد toggle می توانیم element هایی که مخفی هستند را پدیدار کنیم و element هایی که پدیدار هستند را مخفی کنیم. در واقع این متد بین پدیدار بودن و مخفی بودن یک element اصطلاحاً toggle می‌کند. قسمت زیر syntax مربوط به استفاده کردن از این متد را نشان می‌دهد. [snippet]
$(‘selector expression’).toggle(speed, easing, callback)
[/snippet]
ضمناً کد زیر مثالی از نحوه استفاده کردن از این متد را نشان می‌دهد.
$('#myDiv').toggle(500, function () {
$('#msgDiv').append('fadeOut completed.')
});

<div id="myDiv" class="redDiv">
</div>

منبع:وبسایت پرووید