آموزش jQuery- بخش چهارم (افکت ها)

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

مقالات مرتبط

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

افکت ها در جی کوئری

همچون سایر توابع جی کوئری، برای استفاده از توابع افکت جی کوئری ابتدا باید المنت موردنظر را با selector های معرفی شده انتخاب کنیم. هرکدام از این توابع افکت دو پارامتر اختیاری هم میپذیرند. یکی برای تنظیمات سرعت و دیگری تابع callback. سرعت مقدار زمانی را مشخص میکند که طول میکشد افکت کامل شود و تابع callback در واقع تابعی است که پس از کامل شدن افکت اجرا خواهد شد. برای مشخص کردن سرعت افکت هم میتوانید مقادیر عددی استفاده کنید و هم مقادیر رشته ای. مقادیر رشته ای عبارتند از: fast, normal, slow. و مقادیر عددی سرعت اجرای افکت را بر اساس میلی ثانیه مشخص میکند

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

hide() این تابع برای مخفی کردن المنت انتخابی کاربرد دارد. مانند این است که در CSS خصیصه display المنت را به none تنظیم کنیم .

toggle() برای تغییر وضعیت نمایش المنت انتخابی استفاده میشود. . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .

fadeIn() این افکت با تغییر تدریجی وضوح، المنت را از حالت مخفی به حالت نمایش درمی آورد. مانند سایر افکت ها هم میتواند دارای پارامترهای سرعت و callback function باشد. اگر پارامتر سرعت را برای آن در نظر نگیرید ، سرعت نرمال در نظر گرفته میشود یعنی حدود 400 میلی ثانیه.

fadeOut() این افکت با تغییر تدریجی وضوح، المنت را از حالت مخفی به حالت نمایش درمی آورد. مانند سایر افکت ها هم میتواند دارای پارامترهای سرعت و callback function باشد. اگر پارامتر سرعت را برای آن در نظر نگیرید ، سرعت نرمال در نظر گرفته میشود یعنی حدود 400 میلی ثانیه

fadeOut() ترکیبی از توابع fadein و fadeout است. اگر المنت در حالت نمایش باشد، آن را به تدریج مخفی میکند و برعکس اگر در حالت نمایش باشد، آن را به صورت مخفی درمی آورد. فرض کنید دکمه ای داریم با نام instruction. وقتی کاربر آن را کلیک میکند یک div برای نمایش دستورالعمل و وقتی برای بار دوم کلیک کرد این div از حالت نمایش خارج شود. کد آن بصورت زیر خواهد بود:

fadeTo() میزان وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد. پارامتر دوم دریافتی مقداری بین 0 تا یک خواهد بود. المنتی با opacity برابر 0 از حالت نمایش خارج خواهد شد، اما فضایی که در صفحه اشغال کرده بود، باقی میماند.

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

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

slideToggle() ترکیبی از دو افکت slideUp و slideDown است. در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد . میتواند دارای پارامترهای سرعت و callback باشد.

animate() فرمت کلی استفاده از دستور animate به شکل زیر است:

با استفاده از این افکت میتوانیم به خاصیت های CSS که مقادیر عددی را میپذیرند تغییر حالت انیمیشنی بدهیم. مثلا سایز متن، محل قرار گیری یک المنت در صفحه، وضوح یک المنت یا عرض border... برای استفاده از این افکت باید لیستی از خاصیت های CSS و مقادیری که در نهایت میخواهیم به آن برسیم به عنوان پارامتر به تابع animate بدهیم. تا بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر کنند که باعث ایجاد یک حالت انیمیشن می شود . توجه کنید که تابع animate با خواصی که مقدار رشته دارند کار نمیکند مثل رنگ ها(البته میتوان با افزودن library های تعریف شده این قابلیت را به jquery افزود.). تابع animate علاوه بر مقدار سرعت و callback function پارامتر دیگری به نام easing میپذیرد که نشان دهنده حالت تغییر سرعت المنت است. easing میتواند دو مقدار داشته باشد: linear و swing در linear تغییر سرعت در ابتدا و انتها یکی است. اما در swing سرعت اجرای افکت در ابتداو انتهای اجرا به آرامی است و در میانه سریع است.

در مثال زیر هم چگونگی استفاده از افکت animate را به همراه تابع callback میبینیم: فرض کنید یک عکس با ID برابر photo داریم و یک پاراگراف با ID برایر caption. میخواهیم در pageloadابتدا عکس به نمایش درآید(حالتی شبیه zoom) و پس از پایان یافتن نمایش آن پاراگراف ظاهر شود. خواهیم داشت:

به امید اینکه مطالعه و بکارگیری نکات این مقاله برای مبتدیان سودمند باشد. پایدار باشید.