متد show و hide در jquery

در این قسمت از سری آموزش های دوران طراحی وب همانطور که از قبل گفته بودیم می خواهیم به معرفی و استفاده از متد های 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 را در طول مدت 5 ثانیه نمایش می دهد :

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

[/javascript]

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

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

[/javascript]

نکته :

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

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

[/javascript]

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

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

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

[/javascript]

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

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

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

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