جلوه‌ها - انیمیشن

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

به کمک jQuery می‌توانید انیمیشن‌های خود را ایجاد کنید.[۱]

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

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

نحو:

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

پارامتر لازم params خصوصیت CSS ای که باید حرکت کند را مشخص می‌کند.

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

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

مثال زیر استفاده ساده از متد animate() را نشان می‌دهد؛ این مثال یک عنصر <div> را تا زمانی که خصوصیت left برابر با ۲۵۰ پیکسل شود، به سمت راست حرکت می‌دهد:

مثال
1 $("button").click(function(){
2   $("div").animate({left: '250px'});
3 });

بطور پیش‌فرض، همه عنصرهای HTML دارای یک موقعیت (به انگلیسی: position) ایستا هستند، و نمی‌توانند حرکت کنند.

به یاد داشته باشید برای تغییر موقعیت، ابتدا باید خصوصیت position عنصر در CSS را برابر با relative (به فارسی: نسبی)، fixed (به فارسی: ثابت) یا absolute (به فارسی: مطلق) تنظیم کنید.

jQuery animate() - دستکاری چند خصوصیت

دقت کنید که بطور همزمان می‌توان چند خصوصیت را متحرک کرد:

مثال
1 $("button").click(function(){
2   $("div").animate({
3     left: '250px',
4     opacity: '0.5',
5     height: '150px',
6     width: '150px'
7   });
8 });

آیا دستکاری همه خصوصیت‌های CSS با متد animate() ممکن است؟

بله تقریباً! با این حال یک مسئله مهم نباید فراموش شود: همه نام‌های خصوصیت‌ها هنگامی که با متد animate() استفاده می‌شوند، باید camel-cased باشند: باید بجای padding-left بنویسید paddingleft و بجای margin-right بنویسید marginright و به همین ترتیب.

همچنین، متحرک سازی رنگ در هسته کتابخانه jQuery در نظر گرفته نشده‌است.

اگر می‌خواهید رنگ را متحرک کنید، باید پلاگین انیمیشن‌های رنگ را از jQuery.com دانلود کنید.

animate() در jQuery - استفاده از مقدارهای نسبی

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

مثال
1 $("button").click(function(){
2   $("div").animate({
3     left: '250px',
4     height: '+=150px',
5     width: '+=150px'
6   });
7 });

animate() در jQuery - مقدارهای از پیش تعیین شده

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

مثال
1 $("button").click(function(){
2   $("div").animate({
3     height: 'toggle'
4   });
5 });

animate() در jQuery - استفاده از عملکرد صف (به انگلیسی: Queue)

بطور پیش‌فرض، jQuery برای انیمیشن‌ها با عملکرد صف همراه است.

This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.

میانبر:
الگو:اتب

این یعنی که اگر چند فراخوانی animate() را یکی پس از دیگری بنویسید، jQuery یک صف «داخلی» از این فراخوانی‌های متد ایجاد می‌کند.

بنابراین اگر بخواهید انیمیشن‌های مختلف را یکی پس از دیگری نمایش دهید، از مزیت عملکرد صف استفاده می‌کنیم:

مثال ۱
1 $("button").click(function(){
2   var div = $("div");
3   div.animate({height: '300px', opacity: '0.4'}, "slow");
4   div.animate({width: '300px', opacity: '0.8'}, "slow");
5   div.animate({height: '100px', opacity: '0.4'}, "slow");
6   div.animate({width: '100px', opacity: '0.8'}, "slow");
7 });

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

مثال ۲
1 $("button").click(function(){
2   var div = $("div");
3   div.animate({left: '100px'}, "slow");
4   div.animate({fontSize: '3em'}, "slow");
5 });

تمرین‌های jQuery

مرجع جلوه‌های jQuery

برای مرور کامل همهٔ جلوه‌های jQuery، لطفاً به مرجع جلوه‌های jQuery مراجعه کنید.


منابع آموزشی