سبد (0)

تبلیغات

پنهان کردن عناصر بصورت اسلایدی

با jQuery می توان عناصر را بصورت اسلایدی یا کشویی مخفی و یا نمایان کرد.


مثال

مثال - خودتان امتحان کنید

()slideDown
در این مثال، چگونگی نمایان کردن یک عنصر پنهان را بصورت اسلایدی نشان می دهد.

()slideUp
در این مثال، چگونگی پنهان کردن یک عنصر را بصورت اسلایدی نشان می دهد.

()slideToggle
در این مثال، چگونگی نمایان یا پنهان کردن یک عنصر را بصورت اسلایدی نشان می دهد.


پنهان و نمایان کردن عناصر بصورت اسلایدی در jQuery

با jQuery می توان عناصر را بصورت اسلایدی مخفی و یا نمایان کرد.

متدهایی که برای این منظور در jQuery استفاده می شود:

  • ()slideDown
  • ()slideUp
  • ()slideToggle

متد ()slideDown

متد ()slideDown، یک عنصر پنهان را به صورت اسلایدی نمایان می کند.

نحوه استفاده:

$(selector).slideDown(speed,callback);

پارامترها:

پارامترتوضیح
 speed

اختیاری است، سرعت نمایش اسلاید را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideDown اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد)

مثال زیر، نحوه ی استفاده از متد ()slideDown را نشان می دهد:

مثال (پنهان کردن عناصر بصورت اسلایدی)

$("#flip").click(function(){
  $("#panel").slideDown();
});
خودتان امتحان کنید »

متد ()slideUp

متد ()slideUp، یک عنصر را به صورت اسلایدی پنهان می کند.

نحوه استفاده:

$(selector).slideUp(speed,callback);

پارامترها:

پارامترتوضیح
speed

اختیاری است، سرعت پنهان شدن به صورت اسلایدی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideUp اجرا می شود.

مثال زیر، نحوه ی استفاده از متد ()slideUp را نشان می دهد:

مثال (پنهان کردن عناصر بصورت اسلایدی)

$("#flip").click(function(){
  $("#panel").slideUp();
});
خودتان امتحان کنید »

متد ()slideToggle

متد ()slideToggle، بین متدهای ()slideDown و ()slideUp حرکت می کند.

عنصر پنهان را بصورت اسلایدی نمایان و یا عنصر نمایان را بصورت اسلایدی پنهان می کند.

نحوه استفاده:

$(selector).slideToggle(speed,callback);

پارامترها:

پارامترتوضیح
speed

اختیاری است، سرعت پنهان و یا نمایان شدن به صورت اسلایدی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideUp اجرا می شود.

مثال زیر، نحوه ی استفاده از متد ()slideToggle را نشان می دهد:

مثال (پنهان کردن عناصر بصورت اسلایدی)

$("#flip").click(function(){
  $("#panel").slideToggle();
});
خودتان امتحان کنید »

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

دیدگاه‌ها  

+1 # kitana 1395-11-24 20:15
سلام خدمت سایت بسیار عالیتون.یه زحمتی واستون داشتم .
من می خوام یک slideshow عکس درست کنم دقیقا مثل این مدل سایت w3shcools. بخش How To.اموزش ساخت slideshow رو کداشم نوشته.فقط به زبان جاوا اسکریپت نوشته...می تونید اون بخش جاوا اسکریپتشو به زبان جه ی کوئری واسم ترجمه کنین تا یاد بگیرم؟
ممنون می شم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # fatemekhaleghi 1395-08-07 11:17
با سلام و خسته نباشید.
میخواستم بدونم میشه جهت باز شدن اینا رو عوض کرد؟، مثلا به جای اینکه از بالا به پایین بیاد یا بالعکس از چپ به راست بره؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-08-08 10:37
با سلام و تشکر.
باید خصوصیاتی مرتبط با این سؤال باشه. توی گوگل می‌تونید سرچ کنید. اگر پیدا نکردید، می‌تونید از اسلاید و کدهای دیگه‌ای برای منظور خودتون استفاده کنید. در اینترنت اسلاید‌شوهای بسیاری برای انواع سلیقه‌ها وجود داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # niloofar 1395-07-23 11:49
سلام خسته نباشید.
زمانی که می خوام از چند slide toggle استفده کنم با زدن قسمت قسمت مربوط به همه ی قسمت های مربوط به باز می شن. میتونید کمکم کنید که تنها به کلیک برای هر slide toggle فقط پنل مربوط به اون باز شه نه همه پنل ها؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-23 16:51
با سلام و تشکر.
دوست عزیز، کد شما نیومده!

لطفا هنگام درج کد به جای < از علامت ;gt& و به جای علامت > از علامت ;lt& استفاده کنید.
میتونید از لینک زیر برای این کار استفاده کنید.
www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin 1394-07-14 17:55
ایا با جی کوئری می شود یک پاورپوینت درست کرد؟
اگر می شود چگونه ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-23 16:57
با سلام.
میشه از طریف افکت، اسلاید شو درست کرد ولی اینکه بشه فایل powerpoint رو درست کرد، فکر نمیکنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # AminMahdi 1392-11-26 12:58
ممنون، مشکل برطرف شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+14 # امیر پهلوان صادق 1392-11-25 23:15
به نقل از AminMahdi:
با سلام، از این دست وبسایت های فارسی زبان میشه گفت به ندرت وجود داره یا اصلا وجود نداره, امکاناتی از قبیله خودتان امتحان کنید خیلی کاربردی, جالب و مفید هستش که جای تشکر داره. یه سوالی ک برای بنده حقیر بوجود اومده اینه که من همین کدهارو کپی و در نرم افزار دریو ویور پیس میکنم اما متد مد نظر رو به نمایش نمیزاره درصورتی ک همون کد در خودتان امتحان کنید بدرستی عمل میکند.

دوست عزیز، در ابتدا ازتون تشکر می کنم و اما در مورد سوالتون ...! فراموش نکنید که جهت اجرای jQuery بر روی کامپیوتر شخصی تان، در ابتدا باید فایل کتابخانه آنرا دانلود و سپس بصورت صحیح آنرا به صفحه ی HTMLتان لینک کنید. نحوه انجام این کار در بیاموز های قبلی توضیح داده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # AminMahdi 1392-11-23 19:32
با سلام، از این دست وبسایت های فارسی زبان میشه گفت به ندرت وجود داره یا اصلا وجود نداره, امکاناتی از قبیله خودتان امتحان کنید خیلی کاربردی, جالب و مفید هستش که جای تشکر داره. یه سوالی ک برای بنده حقیر بوجود اومده اینه که من همین کدهارو کپی و در نرم افزار دریو ویور پیس میکنم اما متد مد نظر رو به نمایش نمیزاره درصورتی ک همون کد در خودتان امتحان کنید بدرستی عمل میکند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی