آگهی رایگان

متد show و hide در jquery

jquery show hide

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

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

خب به آموزش امروز می پردازیم , همانطور که قبل تر در مورد متد ها در jquery صحبت کرده بودیم , امروز نیز به معرفی دو متد جدید یعنی show و hide در jquery می پردازیم .

همانطور که از نام این دو متد پیداست این متد ها برای نمایش یا مخفی کردن المان ها درون صفحه به کار می روند که متد show جهت نمایش و متد hide جهت مخفی سازی یک المان به کار می رود . به مثال زیر توجه کنید :

[javascript]

// hide element `selector`
$(selector).hide(duration);
// show element `selector`
$(selector).show(duration);

[/javascript]

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

مثال زیر المان selector را در طول مدت ۵ ثانیه نمایش می دهد :

[javascript]
// show element `selector`
$(selector).show(5000);

[/javascript]

مثال زیر المان selector را در طول مدت ۵ ثانیه مخفی می کند :

[javascript]
// show element `selector`
$(selector).hide(5000);

[/javascript]

نکته :

تقریبا اکثر متد های jquery آرگومانی به نام callback دریافت می کنند که کار آن این است که پس از مدت زمان duration یا پاسخ سرور در کاربرد های ajax تابعی یا کاری را که به آن محول کردیم را اجرا خواهد کرد به مثال زیر توجه کنید :

[javascript]
$(selector).hide(2000,function(){
alert(‘this element is hide’);
});

[/javascript]

در مثال بالا پس از ۷ ثانیه که المان selector مخفی شد پیغام `this element is hide` نمایش داده خواهد شد

و اما کمی خلاقیت :

[javascript]
$(selector).hide(2000,function(){
$(selector).show(5000);
});

[/javascript]

در مثال بالا المان مورد نظر در طی زمان ۲ ثانیه محو خواهد شد و پس از مخفی شدن طی زمان ۵ ثانیه دوباره شروع به نمایش دادن خواهد کرد !

خب همانطور که قبل تر گفتیم حتما این قطعه کد ها را تست و اجرا کنید و حتما آن ها را دستکاری کنید تا به قول معروف یاد بگیرید .

امیدوارم از این قسمت از آموزش های دوران طراحی وب لذت کافی را برده باشید حتما با نظرات خوبتون ما رو با خبر کنید !

موفق پیروز و سربلند باشید

 


دیدگاه ها برای متد show و hide در jquery

  • عالییییییییییییییی بود.واقعا ممنونم

    ayat شهریور ۱۷, ۱۳۹۲ ۱۹:۲۷ پاسخ دادن
  • سلام. بسیار خوب و عالی بود ممنون از آموزش خوبتون

    ali شهریور ۱۸, ۱۳۹۲ ۱۱:۳۶ پاسخ دادن
  • مطالب رو دنبال می کنم

    سید مهدی شاه امیریان شهریور ۲۰, ۱۳۹۲ ۱۸:۱۳ پاسخ دادن
  • با سلام و احترام

    خیلی عالی توضیح دادین
    فقط یه نکته کوچیک داشت، در مثال آخری به جای استفاده کردن از متد show مجدد از hide استفاده شده است!
    با سپاس فراوان
    عباسعلی خالصی

    ABS Designer شهریور ۲۰, ۱۳۹۲ ۲۲:۳۳ پاسخ دادن
  • خواهش می کنم
    سایت خیلی خوبی دارین
    واستون آرزوی موفقیت می کنم…

    ABS Designer شهریور ۲۱, ۱۳۹۲ ۰۱:۳۰ پاسخ دادن
  • مرسی از آموزش عالی شما.

    تور ترکیه تیر ۳۰, ۱۳۹۳ ۱۱:۱۱ پاسخ دادن
  • سلام سایت مفیدی دارید خوشحال میشم به منم سر بزنید در حال تولید مجموعه آموزشی وردپرس به صورت کاملا حرفه ای هستم دوست دارم نظرتون رو تو سایتم یعنی آموزش ۹۸ دات کام بگید ( amoozesh98 ) در ضمن بعضی وقتا کاربرا درخواست منابع آموزشی فارسی خوب بیشتر می کنن شما رو هم معرفی می کنم با تشکر.
    ارادتمند : مسلم فلاح نیت
    #

    مسلم فلاح نیت شهریور ۳۱, ۱۳۹۳ ۱۶:۴۹ پاسخ دادن
  • مرسی خوب بود

    جواهری مهر ۲۳, ۱۳۹۳ ۱۳:۳۰ پاسخ دادن

پاسخ به پوریا عزتی لغو پاسخ

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