آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش متوقف سازی انیمیشن در Jquery

دوره های مرتبط با این مقاله

متوقف سازی انیمیشن ها با استفاده از متد stop()

در فصل قبلی با نحوه ی ایجاد انیمیشن های سفارشی با استفاده از متد animate() و اجرای آن ها یکی پس از دیگری آشنا شدیم (آموزش متد animate در jquery). این کار را با دو روش پیاده سازی کردیم: چندبار صدا زدن متد animate() و قابلیت queue (قرار دادن انیمیشن ها در صف و اجرای آن ها به صورت پشت سرهم) جی کوئری. گاهی لازم است یک متد را پیش از اتمام آن، متوقف نمایید. برای این منظور jQuery متدی به نام stop() را فراهم می نماید.
متد نام بر روی تمامی ایفکت های جی کوئری (توابعی که افکت اجرا می کند) نظیر نمایش کشویی/اسلایدی، نمایش/پنهان سازی تدریجی و نیز تمامی انیمیشن های سفارشی که با متد animate() ایجاد می شود، قابل اجرا می باشد.


مثال:

نمونه یک

    Show box
    Stop
    
امتحان کنید

به منظور کاهش اندازه ی کد، توابع به صورت درون خطی و inline در رخدادهای onclick دو لینک مورد نظر فراخوانی شده اند. با کلیک بر روی اولین لینک، متدslideDown() بر روی المان div اجرا شده و آن را با سرعت پایین به صورت کشویی نمایش می دهد. حال به محض کلیک بر روی لینک دوم، اجرای انیمیشن (نمایش کادر سبز رنگ حاوی رشته ی "Hello World" به صورت اسلایدی) درجا متوقف می گردد. متد stop() دو پارامتر می پذیرد. اولین پارامتر مشخص می کند آیا صف اجرای انیمیشن بایستی پاک شود یا خیر (از اجرای انیمشن های صف بندی شده جلوگیری می کند). در حالت پیش فرض بر روی false تنظیم می باشد، بدین معنی که انیمیشن جاری متوقف شده ولی انیمیشن های دیگری که در صف قرار دارند اجازه ی اجرا را دارند.


نمونه دو

    Show box
    Stop
    Stop all
    Reset
    
امتحان کنید

یک انیمیشن دیگر به لینک "Show box" اضافه کردیم. این انیمیشن سبب می شود کادر با سرعت پایین و به صورت کشویی نمایش داده شود و پس از اتمام آن دوباره به صورت کشویی جمع گردد. سیستم صف بندی در جی کوئری اطمینان حاصل می کند که این گام ها به ترتیب مشخص شده و پشت سرهم، اجرا شوند. بر روی لینک "Reset" کلیک کنید تا دوباره کادر سبز رنگ محو می گردد و سپس بار دیگر بر روی لینک "Show box" و در نهایت بر روی لینک "Stop" کلیک کنید. خواهید دید که انیمیشن اول متوقف می شود و راه برای اجرای انیمیشن دوم باز می گردد. اما اگر بر روی دکمه ی"Stop all" کلیک کنید، مقدار true پاس داده شده به عنوان آرگومان باعث می شود تمامی انیمیشن های قرار گرفته در صف خالی شده و به دنبال آن تمامی انیمیشن هایی که قرار است بر روی المان اجرا شود، متوقف گردند.
دومین پارامتر مشخص می کند آیا انیمیشن جاری همان جا متوقف شود یا فورا پایان یابد. ارسال این پارامتر به متد stop() تفاوت قابل توجهی ایجاد می کند. در مثال قبلی، اگر بر روی لینک stop کلیک کنید، انیمیشن درجا متوقف شده و به همان صورت باقی می ماند. با اجرای مثال زیر این تفاوت را به صورت مشهودتری مشاهده خواهید کرد:


با کلیک بر روی لینک "stop" انیمیشن درجا متوقف می شود ولی اگر بر روی لینک "stop but finish" کلیک کنید، انیمیشن فورا پایان می یابد.


امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

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

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


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

  • 759
  •    1216
  • تاریخ ارسال :   1395/01/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .