با سلام به شما دوستای عزیز ف امیدوارم که خوب و شاد باشید و با اموزشهای ما همراه بمانید. در این بخش با نحوه استپ یک انیمیشن آشنا میشید.در فصل قبلی با نحوه ی ایجاد انیمیشن های سفارشی با استفاده از متد animate() و اجرای آن ها یکی پس از دیگری آشنا شدیم. این کار را با دو روش پیاده سازی کردیم: چندبار صدا زدن متد animate() و قابلیت queue (قرار دادن انیمیشن ها در صف و اجرای آن ها به صورت پشت سرهم) جی کوئری. گاهی لازم است یک متد را پیش از اتمام آن، متوقف نمایید. برای این منظور jQuery متدی به نام stop() را فراهم می نماید.
متد نام بر روی تمامی ایفکت های جی کوئری (توابعی که افکت اجرا می کند) نظیر نمایش کشویی/اسلایدی، نمایش/پنهان سازی تدریجی و نیز تمامی انیمیشن های سفارشی که با متد animate() ایجاد می شود، قابل اجرا می باشد. مثال:
نمونه یک
?
۱
۲
۳
۴
۵
به منظور کاهش اندازه ی کد، توابع به صورت درون خطی و inline در رخدادهای onclick دو لینک مورد نظر فراخوانی شده اند. با کلیک بر روی اولین لینک، متدslideDown() بر روی المان div اجرا شده و آن را با سرعت پایین به صورت کشویی نمایش می دهد. حال به محض کلیک بر روی لینک دوم، اجرای انیمیشن (نمایش کادر سبز رنگ حاوی رشته ی “Hello World” به صورت اسلایدی) درجا متوقف می گردد. متد stop() دو پارامتر می پذیرد. اولین پارامتر مشخص می کند آیا صف اجرای انیمیشن بایستی پاک شود یا خیر (از اجرای انیمشن های صف بندی شده جلوگیری می کند). در حالت پیش فرض بر روی false تنظیم می باشد، بدین معنی که انیمیشن جاری متوقف شده ولی انیمیشن های دیگری که در صف قرار دارند اجازه ی اجرا را دارند.
نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
یک انیمیشن دیگر به لینک “Show box” اضافه کردیم. این انیمیشن سبب می شود کادر با سرعت پایین و به صورت کشویی نمایش داده شود و پس از اتمام آن دوباره به صورت کشویی جمع گردد. سیستم صف بندی در جی کوئری اطمینان حاصل می کند که این گام ها به ترتیب مشخص شده و پشت سرهم، اجرا شوند. بر روی لینک “Reset” کلیک کنید تا دوباره کادر سبز رنگ محو می گردد و سپس بار دیگر بر روی لینک “Show box” و در نهایت بر روی لینک “Stop” کلیک کنید. خواهید دید که انیمیشن اول متوقف می شود و راه برای اجرای انیمیشن دوم باز می گردد. اما اگر بر روی دکمه ی”Stop all” کلیک کنید، مقدار true پاس داده شده به عنوان آرگومان باعث می شود تمامی انیمیشن های قرار گرفته در صف خالی شده و به دنبال آن تمامی انیمیشن هایی که قرار است بر روی المان اجرا شود، متوقف گردند.
دومین پارامتر مشخص می کند آیا انیمیشن جاری همان جا متوقف شود یا فورا پایان یابد. ارسال این پارامتر به متد stop() تفاوت قابل توجهی ایجاد می کند. در مثال قبلی، اگر بر روی لینک stop کلیک کنید، انیمیشن درجا متوقف شده و به همان صورت باقی می ماند. با اجرای مثال زیر این تفاوت را به صورت مشهودتری مشاهده خواهید کرد:
نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
Show box
Stop
Stop but finish
Reset
با کلیک بر روی لینک “stop” انیمیشن درجا متوقف می شود ولی اگر بر روی لینک “stop but finish” کلیک کنید، انیمیشن فورا پایان می یابد.
