پنهان کردن عناصر بصورت اسلایدی
با jQuery می توان عناصر را بصورت اسلایدی یا کشویی مخفی و یا نمایان کرد.
مثال - خودتان امتحان کنید
()slideDown
در این مثال، چگونگی نمایان کردن یک عنصر پنهان را بصورت اسلایدی نشان می دهد.
()slideUp
در این مثال، چگونگی پنهان کردن یک عنصر را بصورت اسلایدی نشان می دهد.
()slideToggle
در این مثال، چگونگی نمایان یا پنهان کردن یک عنصر را بصورت اسلایدی نشان می دهد.
پنهان و نمایان کردن عناصر بصورت اسلایدی در jQuery
با jQuery می توان عناصر را بصورت اسلایدی مخفی و یا نمایان کرد.
متدهایی که برای این منظور در jQuery استفاده می شود:
- ()slideDown
- ()slideUp
- ()slideToggle
متد ()slideDown
متد ()slideDown، یک عنصر پنهان را به صورت اسلایدی نمایان می کند.
نحوه استفاده:
پارامترها:
پارامتر | توضیح |
---|---|
speed |
اختیاری است، سرعت نمایش اسلاید را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
callback |
اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideDown اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد) |
مثال زیر، نحوه ی استفاده از متد ()slideDown را نشان می دهد:
مثال (پنهان کردن عناصر بصورت اسلایدی)
$("#panel").slideDown();
});
متد ()slideUp
متد ()slideUp، یک عنصر را به صورت اسلایدی پنهان می کند.
نحوه استفاده:
پارامترها:
پارامتر | توضیح |
---|---|
speed |
اختیاری است، سرعت پنهان شدن به صورت اسلایدی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
callback |
اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideUp اجرا می شود. |
مثال زیر، نحوه ی استفاده از متد ()slideUp را نشان می دهد:
مثال (پنهان کردن عناصر بصورت اسلایدی)
$("#panel").slideUp();
});
متد ()slideToggle
متد ()slideToggle، بین متدهای ()slideDown و ()slideUp حرکت می کند.
عنصر پنهان را بصورت اسلایدی نمایان و یا عنصر نمایان را بصورت اسلایدی پنهان می کند.
نحوه استفاده:
پارامترها:
پارامتر | توضیح |
---|---|
speed |
اختیاری است، سرعت پنهان و یا نمایان شدن به صورت اسلایدی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
callback |
اختیاری است، تابعی است که بعد از اجرای کامل متد ()slideUp اجرا می شود. |
مثال زیر، نحوه ی استفاده از متد ()slideToggle را نشان می دهد:
مثال (پنهان کردن عناصر بصورت اسلایدی)
$("#panel").slideToggle();
});
jQuery Effects Reference
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21583
دیدگاهها
سلام خدمت سایت بسیار عالیتون.یه زحمتی واستون داشتم .
من می خوام یک slideshow عکس درست کنم دقیقا مثل این مدل سایت w3shcools. بخش How To.اموزش ساخت slideshow رو کداشم نوشته.فقط به زبان جاوا اسکریپت نوشته...می تونید اون بخش جاوا اسکریپتشو به زبان جه ی کوئری واسم ترجمه کنین تا یاد بگیرم؟
ممنون می شم.
سلام
پیشنهاد می کنم از اسلایدر زیر استفاده کنید:
beyamooz.com/jquery/340-jquery-plugin/2603-%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B1-%D9%85%D8%AA%D9%86-%D9%88-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-liteaccordion
با سلام و خسته نباشید.
میخواستم بدونم میشه جهت باز شدن اینا رو عوض کرد؟، مثلا به جای اینکه از بالا به پایین بیاد یا بالعکس از چپ به راست بره؟؟
با سلام و تشکر.
باید خصوصیاتی مرتبط با این سؤال باشه. توی گوگل میتونید سرچ کنید. اگر پیدا نکردید، میتونید از اسلاید و کدهای دیگهای برای منظور خودتون استفاده کنید. در اینترنت اسلایدشوهای بسیاری برای انواع سلیقهها وجود داره.
سلام خسته نباشید.
زمانی که می خوام از چند slide toggle استفده کنم با زدن قسمت قسمت مربوط به همه ی قسمت های مربوط به باز می شن. میتونید کمکم کنید که تنها به کلیک برای هر slide toggle فقط پنل مربوط به اون باز شه نه همه پنل ها؟
با سلام و تشکر.
دوست عزیز، کد شما نیومده!
لطفا هنگام درج کد به جای < از علامت ;gt& و به جای علامت > از علامت ;lt& استفاده کنید.
میتونید از لینک زیر برای این کار استفاده کنید.
www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder
ایا با جی کوئری می شود یک پاورپوینت درست کرد؟
اگر می شود چگونه ؟
با سلام.
میشه از طریف افکت، اسلاید شو درست کرد ولی اینکه بشه فایل powerpoint رو درست کرد، فکر نمیکنم.
ممنون، مشکل برطرف شد.
به نقل از AminMahdi:
دوست عزیز، در ابتدا ازتون تشکر می کنم و اما در مورد سوالتون ...! فراموش نکنید که جهت اجرای jQuery بر روی کامپیوتر شخصی تان، در ابتدا باید فایل کتابخانه آنرا دانلود و سپس بصورت صحیح آنرا به صفحه ی HTMLتان لینک کنید. نحوه انجام این کار در بیاموز های قبلی توضیح داده شده است.
با سلام، از این دست وبسایت های فارسی زبان میشه گفت به ندرت وجود داره یا اصلا وجود نداره, امکاناتی از قبیله خودتان امتحان کنید خیلی کاربردی, جالب و مفید هستش که جای تشکر داره. یه سوالی ک برای بنده حقیر بوجود اومده اینه که من همین کدهارو کپی و در نرم افزار دریو ویور پیس میکنم اما متد مد نظر رو به نمایش نمیزاره درصورتی ک همون کد در خودتان امتحان کنید بدرستی عمل میکند.