akofaraji.ir
افکت‌های Show ،Hide و Fading
نوشته شده در تاریخ 31 خرداد 1403
نظرات: 0 امتیاز: 6 زمان مطالعه: 17 دقیقه

 

متدهای ()Show و ()Hide در jQuery

 

در این آموزش به متدهای ()show و ()hide در jQuery می پردازیم. این متدها از سری متدهای افکت های jQuery محسوب می شوند که جهت تعامل کاربران با برنامه از آن ها بهره می برند. در واقع شما می توانید با استفاده از متدهای ()show و ()hide عناصر html را ظاهر یا پنهان کنید.

متد ()hide در واقع یک استایل display:none را به صورت inline به استایلی که برای عنصر html موجود است، اضافه می کند. در واقع شما با استفاده از Selector ها که در آموزش های قبلی jQuery بررسی شد، عنصر یا عناصری را انتخاب و این ویژگی ها را بر آن ها اعمال می کنید. متقابلا با استفاده از متد ()show می توانید عنصری را که پنهان است، ظاهر سازید. در حقیقت متد ()show، ویژگی های مربوط به صفت display در عنصر را به حالت اولیه آن بر می گرداند که قبل از آن که display:none تنظیم شود، نوعا block ،inline یا inline-block هستند.

کد مثال زیر این کاربرد را نشان می دهد:

 

 

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

 

پارامتر duration می تواند با مقادیر پپیش فرضی هم چون “slow” یا “fast” تنظیم شود. همچنین می توانید از یک عدد که در واحد میلی ثانیه تعبیر می شود، استفاده کنید. هر چه مقدار این عدد بیشتر باشد، زمان اجرای افکت بیش تر است و هر چه مقدار این عدد کم تر باشد، افکت show یا hide با سرعت بیش تر و طی زمان کم تر اعمال می شوند.

 

در کد زیر کاربرد این پارامتر را مشاهده کنید:

 

نکته: سرعت یا زمان “fast” که به پارامتر duration نسبت داده می شود، عدد 200 میلی ثانیه را نشان می دهد و سرعت یا زمان “slow” عدد 600 میلی ثانیه را برای افکت نشان می دهد.

 

اگر بخواهید می توانید از یک تابع callback در افکت های show یا hide استفاده کنید که عملکرد تابع callback بعد از اجرای کامل افکت ها خود را نشان می دهد و اجرا می شود. در قسمت های بعدی مطالب بیشتری راجع به توابع callback مشاهده خواهید کرد.

 

کد مثال زیر کاربرد این تابع را در ساختار افکت ها نشان می دهد:

 

متد ()toggle در jQuery

 

عملکرد متد ()toggle که در واقع افکتی را اعمال می کند بر اساس مقدار و حالت اولیه یک عنصر تعریف می شود. اگر عنصر در حالت “پنهان” قرار گرفته باشد، با عملکرد متد ()toggle ظاهر می گردد و اگر عنصر در حالت اولیه به وضعیتی که در صفحه به کاربر نشان داده شود قرار داشته باشد، یعنی «ظاهر» باشد، با عملکرد متد ()toggle عنصر مربوطه از دید کاربر «پنهان» خواهد شد.

در کد مثال زیر این کاربرد بررسی شده است:

 

همان طور که پارامتر duration را جهت کنترل سرعت اجرای افکت های show و hide تعیین کردید، می توانید این پارامتر را با همین کاربرد نیز برای toggle بکار برید.

در کد زیر مشاهده کنید:

 

و همچنین به طریق مشابه و آن طور که پیش تر بررسی شد، برای متد ()toggle نیز می توانید از تابع callback استفاده کنید که در کد زیر مثالی از آن آورده شده است:

 

افکت های Fading در jQuery

 

در ادامه، با نمونه ای دیگر از افکت های jQuery با عنوان Fading آشنا می شوید و مشاهده می کنید که متدهایی که این افکت را اجرا می کنند، چگونه عنصر یا عناصری را از html را محو یا عناصر محو شده را ظاهر می کنند.

 

متدهای ()fadeIn و ()fadeOut در jQuery

 

شما می توانید با استفاده از متدهای ()fadeIn یا ()fadeOut عناصر html را نمایش دهید یا محو کنید. این کار با کاهش و افزایش شفافیت عنصر مربوطه صورت می گیرد.

در حقیقت تفاوتی که بین متدهای fading و متدهای ()show و ()hide وجود دارد، این است که متدهای ()show و ()hide با دستکاری صفت display که مربوط به css است یک عنصر را ظاهر یا پنهان و مخفی می کند، نه آن که عنصر را محو کند (محو کردن به معنای عدم نمایش به دلیل کاهش وضوح عنصر می باشد).

در کد مثال زیر کاربرد متدهای ()fadeIn و ()fadeOut را نیز مشاهده کنید:

 

مانند سایر متدهای مربوط به افکت ها در jQuery، شما این امکان را خواهید داشت تا با استفاده از پارامتر duration، سرعت اجرای متدهای مربوط به این افکت fading را کنترل کنید. در واقع زمانی را جهت اجرای fading تعیین کنید. برای این منظور می توانید از مقادیر پیش فرض “slow” یا “fast” استفاده یا یک عدد را به عنوان مقدار duration اعمال کنید. این عدد در واحد میلی ثانیه است که مقدار بیشتر آن سرعت اجرای کندتر را نشان می دهد و مقدار کمتر سرعت اجرای سریع تر را نشان می دهد.

در کد زیر استفاده از duration را افکت های fading می بینید:

 

نکته: همان طور که در بالا به آن اشاره شد، متدهای ()fadeIn و ()fadeOut بر وضوح یا opacity یک عنصر اعمال می شود و برخلاف متدهای ()show و ()hide روی ابعاد یک عنصر تاثیری نمی گذارد.

همچنین شما می توانید از تابع callback در افکت های fading و متدهای آن استفاده کنید که این تابع بعد از اجرای متدهای ()fadeIn یا ()fadeOut اجرا می گردد. در رابطه با تابع callback در قسمت های بعدی مطالب بیشتری را مشاهده خواهید.

کد زیر استفاده از تابع callback در متدهای fading نشان می دهد:

 

متد ()fadeToggle در jQuery

 

متد ()fadeToggle براساس وضعیت اولیه اقدام به نمایش یا محو عنصر یا عناصر انتخاب شده می کند. اگر در حالت اولیه عنصر یا عناصر انتخاب شده در حالت نمایان قرار گرفته شوند، متد ()fadeToggle اقدام به محو کردن و کاهش وضوح آن عنصر یا عناصر می کند و اگر حالت اولیه عنصر یا عناصر انتخاب شده در حالت محو شده باشد، با عملکرد متد ()fadeToggle عنصر یا عناصر انتخاب شده نمایان خواهند شد.

این عملکرد در کد مثال زیر بررسی شده است:

 

به طریق مشابه که برای متدهای ()fadeIn و ()fadeOut شرح داده شد، می توانید از پارامتر duration جهت تعیین سرعت اجرای متد ()fadeToggle استفاده کنید.

در کد زیر می توانید این کاربرد را مشاهده کنید:

 

به طریق مشابه که برای متدهای بالا از تابع callback استفاده شد، می توانید از تابع callback در متد ()fadeToggle نیز استفاده کنید. کد مثال زیر استفاده از تابع callback در متد ()fadeToggle را نیز نشان می دهد:

 

متد ()fadeTo در jQuery

 

عملکرد متد ()fadeTo مانند عملکرد متد ()fadeIn می باشد، با این تفاوت که در متد ()fadeTo می توانید تعیین کنید که عنصر انتخاب شده تا حد خاصی از وضوح نمایان شود. ساختار استفاده از ()fadeTo به شرح زیر است:

پارامتر opacity در ساختار بالا که استفاده از آن اجباری است، مقدار وضوح نهایی را که باید رخ دهد، نشان می دهد. این پارامتر می تواند مقداری بین 0 و 1 داشته باشد.

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

کد زیر استفاده از متد ()fadeTo را نشان می دهد:

 

در این قسمت از افکت های jQuery، افکت های hide ،show و fading بررسی شدند، در قسمت بعدی از افکت های jQuery به slide ها و animation ها خواهیم پرداخت.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید