آموزش جی کوئری – افکت محو شدن در jQuery

  • منتشر شده در تاریخ

آموزش جی کوئری

در بخش قبلی افکت show و hide را بررسی کردیم. در این قسمت از سری آموزش جی کوئری و افکت ها, به افکت محو شدن در jQuery یا همان fading می پردازیم.

 

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

می توانید از متدهای fadeIn() و fadeOut() در جی کوئری برای نمایش یا مخفی کردن عناصر HTML به تدریج و با افزایش یا کاهش شفافیت (opacity) آن استفاده کنید.

همانند دیگر متدهای افکت جی کوئری, بصورت اختیرای می توانید یک مقدار برای پارامتر مدت زمان یا سرعت برای متدهای fadeIn() و fadeOut() به منظور کنترل انکه چه مدت افکت محو شدن در jQuery اجرا شود.

مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘slow’ یا ‘fast’ , یا عددی در میلی ثانیه برای دقت بیشتر یا انیمیشن های آرام تر استفاده کنید.

نکته: افکت متدهای fadeIn() و fadeOut() مشابه show() / hide() هستند برخلاف آنها, متدهای fadeIn() و fadeOut() فقط شفافیت آنها عناصر هدف را متحرک می کند و انیمیشنی برای ابعاد اعمال نمی کند.

همچنین می توانید یک تابع بازگشتی (callback) بعد از تکمیل افکت محو شدن در jQuery با متدهای fadeIn() و fadeOut() اجرا کنید.

در مورد تابع بازگشتی در بخش های آینده بیشتر آموزش می دهیم.

متد fadeToggle() در جی کوئری

متد fadeToggle() جی کوئری, عنصر انتخاب شده را با متحرک سازی شفافیت آن ها مخفی یا نمایش می دهد. به اینصورت که اگر محو باشند آن را نمایان می کند و اگر نمایان باشد محو می کند.

برای کنترل سرعت افکت fading نیز می توانید برای متد fadeToggle() یک مدت زمان را تعیین کنید.

همچنین امکان مشخص کردن تابع بازگشتی برای متد fadeToggle() وجود دارد.

متد fadeTo()

متد fadeTo()جی کوئری مشابه متد fadeIn() است اما برخلاف آن, متد fadeTo() به شما امکان مشخص کردن سطح شفافیت مشخص را می دهد.

مقدار پارامتر opacity مشخص می کند که شفافیت نهایی المان هدف می تواند بین ۰ و ۱ باشد. پارامتر مدت زمان یا سرعت نیز برای این متد ضروری است که انیمیشن fade چه مقدار طول بکشد.

 

امیدوارم در این بخش آموزش جی کوئری, از افکت محو شدن در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با افکت Sliding در jQuery , آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

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

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی