آموزش متد slide در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی دستور slide

دانلود فیلم و آموزش ویدئویی دستور slide . در این فیلم با دستور slide در جی کوئری آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش کامل متد slide شامل متدهای slideDown و slideUp و slideToggle همراه با مثال و توضیحات کامل. کافی است کدهای زیر را در یک فایل html ذخیره کرده و اجرا کنید تا نتیجه را ببینید. پس با ما باشید.

با jQuery شما می توانید یک slide بر روی عناصر ایجاد کنید.

در این بخش از آموزش جاوا اسکریپت و جی کوئری از تاپ سایت 98 به سراغ متد slide می رویم.

متد slideDown در جی کوئری

با استفاده از متد slideDown در جی کوئری می توانید یک حالت کشویی ایجاد کنید که رو به پایین حرکت کند.

در قسمت زیر سینتکس متد یا دستور slideDown را می بینید.

نحوه کار این متد به این صورت است که ابتدا علامت $ و سپس سلکتور و متد و در انتها نیز سرعت اجرای اسلاید و همچنین callback را مشاهده می کنید.

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

سرعت می تواند تند ، آهسته ، یا بر اساس میلی ثانیه باشد و کاملا اختیاری می باشد یعنی می توانیم آن را وارد نکنیم.

پارامتر callback نیز اختیاری میباشد و می توانید پس از اجرای دستور ، یک تابع را فراخوانی و اجرا کنید.

مثال متد slideDown

در مثال متد slideDown که در پایین مشاهده می کنید با کلیک روی گزینه click یک اسلاید به طرف پایین ایجاد می شود.

این اسلاید را با استفاده از css ایجاد کرده و مخفی کرده ایم و با متد slideDown آن را نمایش می دهیم.

کافی است کد زیر را در یک فایل html قرار داده و اجرا نمایید.

حتما یک فایل با نام jquery.js را در کنار فایل html قرار دهید در غیر این صورت فایل اجرا نخواهد شد.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#f").click(function(){
$("#p").slideDown(3000);
});
});
</script>
<style>
#p, #f {
padding: 4px;
background-color: lightgray;
border: solid 1px red;
}
#p {
padding: 40px;
display: none;
}
</style>
</head>
<body>
<div id="f">Click</div>
<div id="p">TopSite98.com</div>
</body>
</html>

متد slideUp در جی کوئری

متد slideUp در جی کوئری مخالف متد slideDown است.

متد slideUp اسلایدی را که پایین باشد به طرف بالا می برد.

در قسمت زیر سینتکس متد slideUp را مشاهده می کنید.

سینتکس متد مانند متد بالایی میباشد. برای selector می توانید نام عنصر یا کلاس یا id را قرار دهید. در مثال نحوه کار آن را خواهید دید.

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

مثال متد slideUp

مثال متد slideUp در جی کوئری را در قسمت زیر مشاهده می کنید.

در این مثال ابتدا یک اسلاید را با css ایجاد کرده ایم و با کلیک روی گزینه click اسلاید به طرف بالا حرکت می کند.

فایل jquery.js را در کنار فایل حتما بگذارید.

<!DOCTYPE html>
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("#f").click(function(){
$("#p").slideUp(3000);
});
});
</script>
<style>
#p, #f {
padding: 4px;
background-color: lightgray;
border: solid 1px red;
}
#p {
padding: 40px;
}
</style>
</head>
<body>
<div id="f">Click</div>
<div id="p">TopSite98.com</div>
</body>
</html>

متد slideToggle در جی کوئری

متد slideToggle در جی کوئری عمل دو متد بالا را انجام می دهد.

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

سینتکس متد یا دستور slideToggle را مشاهده می کنید.

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

مثال slideToggle

مثال متد slideToggle در جی کوئری را در قسمت زیر می بینید.

در مثال زیر اسلاید را ایجاد کرد ایم که با کلیک روی گزینه click اسلاید به طرف بالا یا پایین حرکت می کند.

سرعت نیز روی 2 ثانیه تنظیم شده است یعنی 2 ثانیه طول می کشد تا اسلاید کامل شود.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#f").click(function(){
$("#p").slideToggle(2000);
});
});
</script>
<style>
#p, #f {
padding: 4px;
background-color: lightgray;
border: solid 1px red;
}
#p {
padding: 40px;
}
</style>
</head>
<body>
<div id="f">Click</div>
<div id="p">TopSite98.com</div>
</body>
</html>

کدها همه تست شده است. می توانید آنها را در فایل html ذخیره کنید و تست نمایید.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید