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

معرفی

انیمیشن مفهومی است که معمولاً واکنش‌های متفاوتی را از سوی مردم دریافت می‌کند. برخی آن را مفید می دانند، در حالی که برخی دیگر استفاده بیش از حد از آن را محکوم می کنند. صرف نظر از این، زمانی که انیمیشن به درستی استفاده شود، معمولاً رابط کاربری را زیباتر می کند و آن را تمیزتر و زنده تر می کند. در مقاله امروز، نگاهی گذرا به اصول اولیه جی کوئری خواهیم انداخت، سپس یاد خواهیم گرفت که چگونه اولین انیمیشن خود را بسازیم، نحوه ساخت را یاد خواهیم گرفت. جلوه های مختلف، و سپس یک انیمیشن می سازیم که بتوان از آن در پروژه های واقعی استفاده کرد.

مرحله 1. اصول jQuery

جی کوئری یک کتابخانه جاوا اسکریپت است که هدف آن کمک به توسعه دهنده است تا با استفاده از کمترین کد ممکن، وب سایت ها و رابط های کاربری غنی و تعاملی ایجاد کند.

یک خط کد معمولی به صورت زیر است:

$ (عنصر DOM) .something ();

بیایید هر قسمت را تجزیه کنیم:

• $ - مخفف برای شی jQuery... اگر از چندین فریمورک به طور همزمان در یک صفحه استفاده می کنید، به جای علامت $، از خلاصه jQuery استفاده کنید: jQuery (DOM Element) .something ();
• (عنصر DOM)- عنصری که قرار است با آن کاری انجام دهید. این یکی از ویژگی های کلیدیجی کوئری برای دریافت می توانید از انتخابگرهای CSS استفاده کنید مورد مورد نظر... هر انتخابگر که در یک فایل CSS کار می کند را می توان در اینجا استفاده کرد. شناسه ها، کلاس ها، شبه کلاس ها، هر چه باشد.
• .چیزی ()- کاری که می خواهید با آیتم به دست آمده انجام دهید. این می تواند هر چیزی باشد، از پنهان کردن یک عنصر گرفته تا درخواست AJAX و مدیریت رویداد.

امروز ما فقط به انیمیشن و اثرات مرتبط با عملکرد آن خواهیم پرداخت.

مرحله 2. استفاده از جلوه های داخلی

جی کوئری فراهم می کند تعداد زیادی ازروش‌های داخلی که می‌توانید مستقیماً از آنها استفاده کنید. اینها روشهایی برای نمایش / پنهان کردن عناصر، با تغییرات مختلف از جمله لغزش یک عنصر و تغییر شفافیت آن هستند. همچنین می توانید از چند روش استفاده کنید تغییر وضعیتکه دید عنصر را تغییر می دهد.

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

$ ("# عنصر"). effect ();

در بالا، پارادایم اصلی جی کوئری است، ابتدا ما دریافت می کنیم عنصر ضروریبا استفاده از انتخابگرهای CSS در مرحله بعد، ما فقط هر یک از متدهای داخلی را فراخوانی می کنیم.

اگرچه اکثر متدها را می توان بدون پارامتر فراخوانی کرد، اما اغلب لازم است که عملکرد آنها را سفارشی کنید. هر یک از متدها حداقل دو پارامتر دارد: سرعتو پاسخ به تماس.

سرعت- مدت زمان انیمیشن را بر حسب ثانیه تعریف می کند. می توانید یکی از موارد زیر را به عنوان مقدار ارسال کنید کلید واژه ها: کند، معمولی یا سریع; یا زمان را بر حسب میلی ثانیه تنظیم کنید.

پاسخ به تماستابعی است که پس از تکمیل انیمیشن اجرا می شود. شما می توانید آن را برای هر چیزی استفاده کنید، به عنوان مثال، یک تماس AJAX در پس زمینه، بخش به روز رسانی رابط کاربریو خیلی بیشتر. شما فقط توسط تخیل خود محدود شده اید.

• نشان دادن/پنهان شدن- روش هایی برای نمایش و پنهان کردن یک عنصر. سرعت و برگشت تماس را به عنوان پارامتر می پذیرد.
• تغییر وضعیت- روشی که نمایش یک عنصر را بسته به وضعیت فعلیعنصر یعنی اگه مخفی باشه نمایش میده و بالعکس. از روش های نمایش و پنهان کردن استفاده می کند.
• اسلاید به پایین/slideUp- روش های کاملا واضح با تغییر ارتفاع یک عنصر، یک انیمیشن کشویی ایجاد می شود که عنصر را نشان می دهد یا پنهان می کند.
• slideToggle- تقریباً مانند روش toggle، با این تفاوت که از متدهای slideDown / slideUp برای نمایش / پنهان کردن عنصر استفاده می کند.
• fadeIn/محو شدن- تغییر شفافیت یک عنصر برای ایجاد یک افکت محو شدن.
• fadeTo- شفافیت عنصر را با توجه به مقدار ارسال شده تغییر می دهد. همانطور که ممکن است حدس بزنید، یک پارامتر کدورت اضافی می گیرد، جایی که 0 است شفافیت کاملو 1 کاملاً مات است.

به عنوان یک قابلیت اضافی، روش تغییر وضعیت، می تواند عبارتی را به عنوان پارامتری در نظر بگیرد که تصمیم می گیرد عنصر نمایش داده شود یا پنهان شود.

برای مثال، اگر می‌خواهید فقط آیتم‌های فهرستی را تغییر دهید که دارای کلاس هستند اثر، کد شما به شکل زیر خواهد بود:

$ ("li"). toggle ($ (this) .hasClass ("اثر"));

به عبارت ساده، تابع تغییر وضعیتعبارت ارسال شده به آن را به عنوان یک پارامتر بررسی می کند و اگر درست باشد، نمایان بودن عنصر را تغییر می دهد. عبارتی که در مثال ارسال کردیم بررسی می کند که آیا عنصر دارای کلاس خاصی است یا خیر.

مرحله 3. انیمیشن خود را بسازید

اغلب اوقات، روش های داخلی با نیازهای شما مطابقت ندارند، در این صورت به احتمال زیاد می خواهید جلوه های خود را ایجاد کنید. با جی کوئری به راحتی می توانید این کار را انجام دهید.

برای ایجاد یک افکت انیمیشن شخصی، به روش نیاز دارید جان دادن... به نظر می رسد این است:

$ ("# somelement"). animate ((property: value),);

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

پارامترهای سرعت و برگشت به تماس همان عملکردهای روش های قبلی را انجام می دهند. یک شی با ویژگی های متشکل از تعداد معینی جفت کلید / مقدار چیزی است که این روش را منحصر به فرد می کند. شما هر ویژگی را که می خواهید متحرک کنید همراه با نتیجه نهایی پاس می کنید. به عنوان مثال، فرض کنید می خواهید عرض یک عنصر را متحرک کنید تا به 90 درصد مقدار فعلی آن تغییر کند. این میتواند بصورت زیر انجام شود:

$ ("# somelement"). animate ((عرض: "90٪")، 350، تابع () (هشدار ("انیمیشن اجرا شده است."));

مثال کد بالا تغییر عرض را به 90% متحرک می کند و سپس پیامی مبنی بر تکمیل انیمیشن نمایش می دهد.

توجه داشته باشید که محدودیتی در تعداد ندارید. می‌توانید انیمیشن را به مجموعه‌ای از ویژگی‌ها، از جمله شفافیت، حاشیه‌ها، لایه‌بندی، حاشیه‌ها، اندازه فونت اضافه کنید. روش جان دادن، همچنین راحت است زیرا می تواند با هر واحد اندازه گیری کار کند. پیکسل، ems، درصد - همه چیز کار می کند. بنابراین حتی نمونه کد مبهم زیر نیز کار خواهد کرد. حقیقت چندان واضح به نظر نخواهد رسید.

$ ("# somelement"). متحرک ((عرض: "90%" اندازه قلم: "14em"، ارتفاع: "183px"، opacity: 0.8، حاشیه بالا: "2cm"، حاشیه چپ: "0.3in"، حاشیه پایین: "30mm" "،)، 350، تابع () (هشدار (" انیمیشن به پایان رسید. "));

هنگام تعیین یک خاصیت متشکل از چند کلمه، بدون خط تیره نوشته می شود و حرف اول کلمه دوم باید بزرگ باشد. این ضبط تفاوت قابل توجهی با معمول دارد نحو CSSپس حتما سعی کنید آن را به خاطر بسپارید. به عنوان مثال، ملک لبه بالا، باید نوشته شود borderTop.

توجه داشته باشید: jQuery فقط به شما امکان می دهد مقادیر ویژگی های عددی را متحرک کنید. این بدان معنی است که شما نمی توانید ویژگی های رنگ را تنها با استفاده از jQuery متحرک کنید. اما آنقدرها هم بد نیست. با کمک کمی از jQuery UI، می توانید انیمیشن های رنگی را به راحتی اضافه کنید.

مرحله 4. تنظیم افکت

اگر به افکت ساده در صفحه نمایشی نگاه کنید، ممکن است متوجه یک خطای کوچک شده باشید. قرار دادن مکرر ماوس بر روی یک عنصر منجر به یک صف طولانی از تکرار افکت های انیمیشن می شود. نتیجه یک اثر ناخوشایند و تکان دهنده است.

ساده ترین راه برای حل این مشکل استفاده از روش است متوقف کردن، درست قبل از شروع انیمیشن. این روش صف را به خوبی پاک می کند و انیمیشن به طور معمول اجرا می شود.

به عنوان مثال، این کد معمولی شما است:

$ ("# someelement") .hover (تابع () ($ (this) .animate ((بالا: 20)، "سریع");)، تابع () ($ (this) .animate ((بالا: 0) ، "سریع")؛))؛

با استفاده از روش متوقف کردنبرای جلوگیری از تکرارهای غیر ضروری انیمیشن، شما کد جدیدبه این صورت خواهد بود:

$ ("# عنصر"). .animate ((بالا: 0)، "سریع");));

خیلی ساده، درسته؟ اما این روش یک مشکل کوچک دارد. حرکت سریع یک اثر تکراری ایجاد نمی کند، اما به قیمت انیمیشن ناقص است. اگر می خواهید این مشکل را به طور کامل حل کنید، به افزونه ای مانند hoverFlow نیاز دارید.

مرحله 5. افزودن رئالیسم - تسهیل

اگر می‌خواهید کمی واقعی‌تر به آن اضافه کنید، به کنترل بیشتری روی سرعت اجرای انیمیشن نیاز دارید. اینجاست که سهولت به کمک ما می آید. تسهیلشتاب و کاهش سرعت انیمیشن را در طول زمان کنترل می کند.

روشی که تسهیلبه طور پیش فرض استفاده می کند، نامیده می شود تاب خوردن، در عملکرد اصلی jQuery تعبیه شده است. پلاگین آسان سازی رابرت پنر به شما امکان استفاده از چندین افکت مختلف را می دهد.

تنها یک هشدار وجود دارد که می آیددر مورد استفاده از جلوه‌های آسان‌کننده شخصی: شما فقط می‌توانید از آنها در کنار هم استفاده کنید جلوه های ویژهانیمیشن، یعنی با روش متحرک کردن ()... هنگامی که افزونه را متصل کردید، استفاده از هر روش آسان سازی با ارسال آن به عنوان پارامتر بسیار آسان است:

$ ("# somelement"). animate ((عرض: "90%" ارتفاع: "183px")، 550، "easeInElastic");

می‌توانید در صفحه نمایشی در بخش مربوطه بررسی کنید که جلوه‌های مختلف آسان‌کننده چگونه هستند. در حالی که ممکن است برخی از جلوه ها برای همه موقعیت ها مناسب نباشند، انیمیشن شما در این زمان بسیار جذاب تر به نظر می رسد استفاده صحیحبرخی از روش های تسهیل

مرحله 6. یک درجه بالا رفتن - jQuery UI

ارتقاء به jQuery UI تعدادی ویژگی ضروری را برای ما به ارمغان می آورد. در واقع برای استفاده توابع اضافی، شما نیاز ندارید کتابخانه کامل... برای گرفتن عملکرد مورد نظر، به افکت های داخلی نیاز دارید. نه هسته خود رابط کاربری، فقط یک فایل با جلوه های داخلی که حدود 10 کیلوبایت وزن دارد.

اکثر توابع مهمکتابخانه جلوه‌های jQuery UI از انیمیشن رنگی، آسان‌سازی و انتقال کلاس پشتیبانی می‌کند.

اگر به خاطر داشته باشید قبلاً گفتم که در jQuery فقط می توان انیمیشن ها را اعمال کرد مقادیر عددی... با jQuery UI، می توانید این محدودیت را فراموش کنید. اکنون می توانید به راحتی متحرک سازی کنید رنگ پس زمینهعنصر، رنگ قاب و مانند آن. همچنین، به جای ایجاد توابع جداگانه برای ویژگی های جدید، رابط کاربری جی کوئری به سادگی عملکرد پایه را گسترش می دهد. جان دادن... یعنی اگر کتابخانه را در صفحه خود قرار داده اید، می توانید از روش معمول استفاده کنید جان دادنو او تمام کارهای کثیف را برای شما انجام خواهد داد.

به عنوان مثال، اگر می خواهید رنگ حاشیه یک عنصر را در حالت شناور متحرک کنید، کد شما به شکل زیر خواهد بود:

$ (". block"). شناور (تابع () ($ (this) .animate ((borderColor: "black"), 1000);)، تابع () ($ (this) .animate ((borderColor: "red ")، 500)))؛

انتقال کلاس ها مسئول متحرک سازی بین کلاس ها هستند. استفاده كردن کتابخانه پایهاگر jQuery را حذف کنید و سپس یک تغییر کلاس اضافه کنید ظاهرعنصر، آن را فورا اتفاق می افتد. وقتی یک کتابخانه UI در اختیار دارید، می توانید پاس کنید گزینه های اضافیکه سرعت انیمیشن، روش را کنترل می کنند تسهیلو پاسخ به تماس... این عملکرد، مانند موارد قبلی، بر روی API موجود jQuery ساخته شده است تا فرآیند انتقال را تسهیل کند.

مرحله 7. اولین اثر واقعی خود را ایجاد کنید

همه نمونه‌های بالا فقط نسخه‌های آزمایشی عملکرد هستند. خوب است که از آنها برای ایجاد یک اثر واقعی استفاده کنید. این کاری است که ما قرار است انجام دهیم. اثر ما چیزی رادیکال یا خاص نخواهد بود، اما با کمک آن، یاد خواهید گرفت که چگونه دانش به دست آمده را در عمل به کار ببرید.

فرض کنید باید تصویری را نمایش دهیم که در داخل آن دو بخش روی شناور ماوس ظاهر می شود. بخش بالا شامل عنوان تصویر، بخش پایین حاوی عنوان تصویر است توضیح کوتاه... من می دانم که می توانید پیدا کنید مقدار زیادیپلاگین های مختلفی که همین کار را انجام می دهند، اما امروز می خواهیم این کار را از ابتدا انجام دهیم. آنقدرها هم که به نظر می رسد سخت نیست. در واقع، بسیار ساده و به اندازه کافی سریع است. بیا شروع کنیم.

Html

ابتدا به یک پایه HTML نیاز داریم.

برای این اثر باید به ساختار هر عنصر فکر کنیم. هر عنصر در یک div با کلاس پیچیده می شود مورد... در داخل div، سه عنصر قرار خواهد گرفت: یک تصویر، و دو div حاوی نام و توضیحات تصویر.

بقیه قسمت ها خیلی ساده هستند. ما باید کتابخانه jQuery، jQuery UI و فایلی حاوی کد شخصی خود را به صفحه متصل کنیم. به یاد داشته باشید که ما فقط به افکت‌های رابط کاربری جی کوئری نیاز داریم، اگر می‌خواهید افکت‌های بیشتری اضافه کنید، به آن نیاز خواهید داشت مجمع ویژه، که از اینجا قابل دانلود است.

صفحه ما در این مرحله به این شکل خواهد بود.

CSS

آیتم (موقعیت: نسبی؛ حاشیه: 20 پیکسل 60 پیکسل 40 پیکسل 0؛ سرریز: پنهان؛) .item .title, .item .desc (پس زمینه: # 000؛ رنگ: #fff؛ موقعیت: مطلق؛ نمایش: بلوک؛ عرض: 638 پیکسل ؛ کدورت: 0.4;) آیتم . عنوان (بالا: 0؛ اندازه قلم: 16 پیکسل؛ بالشتک: 12 پیکسل 10 پیکسل 25 پیکسل 0؛ تراز نوشتار: راست راست؛) آیتم .نزولی (پایین: 0؛ اندازه قلم: 12 پیکسل؛ اندازه قلم: 12 پیکسل بالشتک: 5px 0 15px 10px؛)

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

بلوک هایی که حاوی عنوان و توضیحات هستند دارای مجموعه ویژگی هستند مقام: مطلقبه طوری که آنها دقیقاً در جعبه عکس قرار می گیرند. مختصات اختصاص داده شده به عنوان بالا: 0بنابراین آن را در بالا نشسته است، و توضیحات پایین: 0، و، بر این اساس، در پایین قرار دارد.

بقیه CSS بسیار ساده است، با سبک های فونت اختصاص داده شده، کمی موقعیت یابی. چیز خاصی نیست.

حالا صفحه ما به این شکل است.

روشن کردن جادوی جاوا اسکریپت

$ (سند) .ready (تابع () (// کد برایسایر بخش های نسخه ی نمایشی $ (". آیتم") ، کودکان ("div.title"). animate ((بالا: -60)، 300); $ (. مورد"). kids ("div.desc"). animate ((پایین: -40)، 300); $ (". مورد"). شناور (تابع () ($ (this) .children ("div.title"). stop () animate ((بالا: 0)، 700، "easeOutBounce")؛ $ (این ) .children ("div.desc"). stop (). animate ((پایین: 0)، 700، "easeOutBounce");)، تابع () ($ (this) .children ("div.title"). توقف (). animate ((بالا: -60)، 500)؛ $ (این) .children ("div.desc"). stop (). animate ((پایین: -40)، 400);)); $ (". عنوان، .desc"). شناور (تابع () ($ (این) .stop (). animate ((Color: "# 444")، 700، "easeOutSine");)، تابع () ( $ (این) .stop () animate ((Color: "# 000")، 700);)); ))؛

ممکن است کمی پیچیده به نظر برسد، اما واقعا اینطور نیست. بیایید نگاهی به هر قسمت بیندازیم.

منطق پشت این اثر بسیار ساده است. از آنجایی که ما عناصر را کاملاً در موقعیت قرار دادیم، ابتدا آنها را خارج از کادر تصویر پنهان می کنیم. هنگامی که ماوس را روی تصاویر می‌چرخانیم، فقط باید آنها را به موقعیت اصلی خود برگردانیم.

ابتدا عنوان و توضیحات را به خارج از بلوک والد منتقل می کنیم. اما به جای استفاده از CSS، این کار را انجام می دهیم با استفاده از جاوا اسکریپت، به دلایل بسیار خاص حتی اگر JS غیرفعال باشد، صفحه همچنان کاربردی خواهد بود. عنوان و توضیحات در بالای تصویر باقی می مانند و به نظر می رسد که گویی یک افکت شناور اعمال شده است. اما اگر این بلوک ها را با با استفاده از CSSو JS موجود در صفحه غیرفعال می شود، هرگز روی صفحه ظاهر نمی شود.

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

در داخل یک تابع، این- عنصری را نشان می دهد که رویداد را آغاز کرده است. ما از روش استفاده می کنیم جان دادن، برای تغییر مقادیر مربوطه. ما نیز استفاده می کنیم تسهیلبرای افزودن جذابیت بیشتر به اثر ما. هنگامی که ماوس را نگه می داریم، فقط مقادیر را به حالت اولیه خود تغییر می دهیم.

به عنوان یک افزونه کوچک، به لطف رابط کاربری jQuery، قرار گرفتن روی بلوک های عنوان یا توضیحات به آرامی تغییر رنگ می دهد.

تمام است، اثر ما آماده استفاده است. می توانید به مثال های داده شده نگاه کنید.

JQuery یک کتابخانه عالی است که تنوع قابل توجهی در آن ایجاد شده است سال های گذشتهرویکردهای توسعه دهندگان برای حل مشکلاتی که با آن روبرو هستند. وقتی ظاهر جی کوئری CSSنمی تواند انیمیشن های پیچیده ایجاد کند. برای ایجاد آنها از جاوا اسکریپت استفاده شده است. jQuery ایجاد انیمیشن را با یک مرتبه قدر ساده کرده است. این کتابخانه شامل ساده ترین انیمیشن ها (fadeIn ()، hide ()، slideDown () و غیره است. به شما امکان می دهد هر انیمیشنی را با استفاده از متد animate () ایجاد کنید.این مقاله به شرح این روش اختصاص دارد.

jQuery animate () یک متد wrapper است، یعنی روی یک مجموعه از پیش انتخاب شده از عناصر DOM پیچیده شده در jQuery کار می کند. این روش به شما این امکان را می دهد که جلوه های انیمیشن مورد نظر را روی عناصر مجموعه اعمال کنید. عملی کردن موارد فوق با وجود مجموعه ای از ویژگی های CSS و مقادیری که این ویژگی ها پس از اتمام اجرای انیمیشن خواهند گرفت امکان پذیر است. مقادیر متوسطی که سبک پس از دستیابی به اثر مورد نظر خواهد داشت (به طور خودکار توسط موتور انیمیشن کنترل می شود) با مدت زمان افکت و عملکرد آسان سازی تعیین می شود. این دو گزینه در زیر مورد بحث قرار خواهند گرفت.

لیست خصوصیات CSS که متحرک هستند محدود به آنهایی است که می توانند مقادیر عددی داشته باشند. مقادیر می توانند مطلق (مثلا 200) یا نسبی باشند. وقتی روی مقادیر مطلق تنظیم می شود، واحد پیش فرض jQuery پیکسل است. ما همچنین می توانیم از واحدهای خاص استفاده کنیم: em، rem یا درصد. برای تعیین مقادیر نسبی، از پیشوندهای + = یا - = استفاده می شود. پیشوندها هدف را به ترتیب در جهت مثبت یا منفی هدایت می کنند.

پارامترها و امضای متد animate ().

این روش دو شکل اصلی دارد. بسیاری از پارامترهای مورد استفاده اختیاری هستند (محصور در پرانتز).

• متحرک کردن (ویژگی‌ها [، مدت زمان] [، کاهش] [، پاسخ به تماس])
• متحرک سازی (ویژگی ها [، گزینه ها])

در واقع پارامترها:

• خواص (Object): لیستی از ویژگی های css حاوی مقادیری است که در انتهای انیمیشن به دست آمده است.
• مدت زمان (تعداد | رشته): مدت اثر بر حسب میلی ثانیه یا یکی از موارد از پیش تعریف شده خطوط ایجاد شده است: «آهسته» (600 میلی‌ثانیه)، «عادی» (400 میلی‌ثانیه)، یا «سریع» (200 میلی‌ثانیه). پیش فرض "عادی" است.
• easing (String): نام تابع easing (که تغییر سرعت انیمیشن را مشخص می کند) که در انتقال استفاده می شود. پیش فرض "نوسان" است.
• پاسخ به تماس (تابع): تابعی است که با پایان یافتن انیمیشن برای هر عنصر متحرک اجرا می شود.
• گزینه ها (Object): یک شی حاوی مجموعه ای از ویژگی ها (گزینه های اضافی) برای ارسال به متد. در دسترس خواص زیر:
  • همیشه (عملکرد): تابعی است که وقتی انیمیشن به پایان می رسد یا زمانی که انیمیشن متوقف می شود (اما کامل نمی شود) فراخوانی می شود.
  • کامل (عملکرد): تابعی که در پایان انیمیشن اجرا می شود.
  • انجام شده (عملکرد): تابعی که با پایان انیمیشن فراخوانی می شود.
  • مدت زمان (رشته | شماره): در بالا توضیح داده شد.
  • تسهیل (رشته): در بالا توضیح داده شد.
  • شکست (عملکرد): زمانی اجرا می شود تلاش ناموفقانیمیشن
  • پیشرفت (عملکرد): بعد از هر مرحله انیمیشن اجرا می شود. پس از اجرای انیمیشن برای هر عنصر یک بار فراخوانی می شود.
  • queue (Boolean): زمانی که انیمیشن باید در صف افکت قرار گیرد (جزئیات زیر) پیش فرض درست است.
  • specialEasing (Object): یک شیء که پارامترهای آن ویژگی های css و مقادیر آن توابع انتقال هستند.
  • start (عملکرد): زمانی اجرا می شود که انیمیشن شروع به اجرا کند.
  • step (Function): تابعی برای فراخوانی هر ویژگی متحرک هر عنصر متحرک.

مدت تسهیلاتبرای توصیف روشی که رندرینگ را کنترل می‌کند و نرخ فریم یک انیمیشن را تنظیم می‌کند. اگر گزینه queue درست باشد، انیمیشن به صورت متوالی و در صورت نادرست بودن به صورت موازی (خارج از ترتیب) اجرا می شود.

نمونه هایی از استفاده از متد animate ().

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

تک انیمیشن

ایجاد یک انیمیشن واحد، تنها با یک تماس بسیار آسان است. به عنوان مثال، شما باید یک عنصر را از یک طرف یک بلوک به طرف دیگر منتقل کنید. برای نشان دادن این انیمیشن، بیایید دو تا بسازیم عنصر div، یکی در داخل دیگری سبک به شرح زیر است: پس زمینه div داخلی قرمز است. کد:

Html

CSS

مستطیل (عرض: 300 پیکسل؛ ارتفاع: 20 پیکسل؛ نمایشگر: بلوک؛ موقعیت: نسبی؛ حاشیه: 1 پیکسل سیاه و سفید؛ حاشیه: 20 پیکسل 0؛) مربع کوچک (نمایش: بلوک؛ عرض: 20 پیکسل؛ ارتفاع: 20 پیکسل؛ موقعیت: مطلق؛ رنگ پس زمینه: قرمز؛)

بیایید () را متحرک کنیم و مربع کوچک را از یک طرف به طرف دیگر حرکت دهیم:

جی کوئری

$ (". مستطیل") .find (". مربع-کوچک") .animate ((سمت چپ: 280)، "آهسته");

فقط ویژگی سمت چپ متحرک است. مدت زمان انیمیشن - از قبل مقدار را تنظیم کنیدکند (600 میلی ثانیه). داخلی

مقالات مرتبط برتر