انیمیت خاصیتها
شهریور ۸م, ۱۳۸۸
امروز نوشتهای دیدم از James padolsey، اینجا: http://james.padolsey.com/javascript/fun-with-jquerys-animate/
به طور خلاصه گفته استفاده از تابع animate در jQuery محدود به پویاسازی خاصیتهای CSS نیست و میشه ازش برای تغییر مقدار مشخصهها (propery) در یک شی (در جاوااسکریپت اشیا به این صورت تعریف میشن: {propery: value} ) استفاده کرد.
مثال:
[js]
var from = {property: 0};
var to = {property: 100};
jQuery(from).animate(to, {
duration: 100,
step: function() {
console.log( ‘Currently @ ‘ + this.property );
}
});
[/js]
مثال گویای همهچیز هست ولی چند تا توضیح میدم: یه شی بینام به جیکوئری داده میشه و به عنوان اولین آرگومان تابع animate مقداری که باید به اونجا برسه (to) تعریف میشه. آرگومان بعدی تابع هم شی بینامیه که سایر تنظیمات تابع animate بهش داده میشه. اون duration:100 مقدار زمان به میلثانیهست و میشد اونو از این شی بینام خارج کرد و به عنوان آرگومان دوم به تابع داد. ترتیب آرگومانها در animate به یکی از این دو روشه:
[js]
/* #1 */
jQuery(‘something’).animate({prop:1}, duration, easing, callback);
/* #2 */
jQuery(‘something’).animate({prop:1},{
easing: easing,
duration: duration,
complete: callback
});
[/js]
با step یه تابع بینام بهش میدیم تا با هر بار تغییر مقدار فراخوانی بشه. در این تابع خود مقدار رو با یه رشته متنی به کنسول میفرستیم. دقت کنید که console.log فقط در فایرفاکس و با افزونه فایرباگ کار میکنه.
کارهایی که میشه با این انجام داد واقعاً نامحدوده (تنها عامل محدودهکننده تخیله). با این روش میشه هر چیزی رو به صورت انیمیشن درآورد.