آموزش متدهای slide در جی کوئری
دوباره سلام خدمت شما علاقه مندان به آموزش جی کوئری. در جلسه قبل به آموزش متدهای fade در جی کوئری پرداختیم و در این جلسه با آموزش متد های slide در جیکوئری آشنا میشویم. پس همراه ما باشید.
متدهای افکت Slide در جیکوئری
همان طور که قبلا اشاره کردیم جی کوئری یک سری متد برای اجرای افکت روی عناصر صفحه در اختیار شما قرار داده است که با تعدادی از آنها آشنا شدیم. متدهای slide این قابلیت را به شما می دهند تا عنصر مخفی در صفحه را با افکت کشویی یا Slide از بالا به پایین نمایش دهید (slideDown) یا عنصر نمایان در صفحه را به صورت کشویی از پایین به بالا مخفی کنید (slideUp).
متدهای افکت slide در سه متد تعریف می شوند:
- slideDown
- slideUp
- slideToggle
در ادامه به توضیح هر یک از این متد می پردازیم.
متد slideDown
از متد slideDown در جی کوئری می توان به صورت کشوئی (از بالا به پایین) عناصر مخفی در صفحه را نمایان کرد. این متد 2 پارامتر اختیاری به عنوان ورودی دریافت می کند.
قاعده دستوری این متد به شکل زیر است :
$(selector).slideDown(speed,callback);
پارمترهای دریافتی متد slideDwon به شرح زیر است :
Speed : این پارامتر اختیاری است و مدت زمان اجرای متد را مشخص می کند. مقدار این پارامتر می تواند یکی از کلمات کلیدی fast یا slow باشد و یا عددی به عنوان میلی ثانیه. (مثلا 5000 میلی ثانیه که برابر 5 ثانیه میشود)
Callback : این پارامتر نیز اختیاری است. مقدار این پارامتر تابعی است که پس از اجرای کامل متد slideDown اجرا میشود.
در مثال زیر با کلیک به روی دکمه "Slide Down" تگ <p> که در صفحه مخفی است به صورت کشویی نمایان می شود.
کدهای HTML
<button>Slide Down</button>
<p>
this is an example to show<br>
slide methodes in jquery
</p>
کدهای CSS و جیکوئری
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideDown();
})
})
</script>
<style>
p {
background: red;
color: white;
width: 10%;
padding: 20px;
display: none;
}
</style>
متد slideUp در جی کوئری
از متد slideUp در جی کوئری می توان به صورت کشوئی (از پایین به بالا) عناصر نمایان در صفحه را پنهان کرد. این متد 2 پارامتر اختیاری به عنوان ورودی دریافت می کند.
قاعده دستوری این متد به شکل زیر است :
$(selector).slideUp(speed,callback);
پارمترهای دریافتی متد slideUp به شرح زیر است:
Speed : این پارامتر اختیاری است و مدت زمان اجرای متد را مشخص می کند. مقدار این پارامتر می تواند یکی از کلمات کلیدی fast یا slow باشد و یا عددی به عنوان میلی ثانیه. (مثلا 5000 میلی ثانیه که برابر 5 ثانیه می باشد)
Callback : این پارامتر نیز اختیاری است. مقدار این پارامتر تابعی است که پس از اجرای کامل متد slideUp اجرا میشود.
در مثال زیر با کلیک به روی دکمه "Slide Up" تگ <p> که در صفحه نمایان است به صورت کشویی مخفی می شود.
کدهای HTML
<button>Slide Up</button>
<p>
this is an example to show<br>
slide methodes in jquery
</p>
کدهای جی کوئری
$(document).ready(function(){
$("button").click(function(){
$("p").slideUp();
})
})
متد slideToggle
متد slideToggle در جی کوئری ترکیبی از دو متد slideUp و slideDown است. هنگامی که عناصر در حالت slideDown باشد این متد مانند slideUp عمل می کند و عنصر را با افکت کشویی به سمت بالا مخفی می کند و همچنین اگر عنصر به صورت slideUp باشد این متد عنصر مورد نظر را با افکت کشویی به سمت پایین نمایان می کند.
قاعده دستوری این متد به شکل زیر است :
$(selector).slideUp(speed,callback);
پارمترهای دریافتی متد slideUp به شرح زیر است :
Speed : این پارامتر اختیاری است و مدت زمان اجرای متد را مشخص می کند. مقدار این پارامتر می تواند یکی از کلمات کلیدی fast یا slow باشد و یا عددی به عنوان میلی ثانیه. (مثلا 5000 میلی ثانیه که برابر 5 ثانیه می باشد)
Callback : این پارامتر نیز اختیاری است. مقدار این پارامتر تابعی است که پس از اجرای کامل متد slideToggle اجرا میشود.
در مثال زیر با کلیک به روس دکمه "Slide Toggle" تگ <p> که در صفحه مخفی است به صورت کشویی نمایان می شود.
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
})
})
نظرات کاربران