در بخش قبلی افکت محو شدن در jQuery را بررسی کردیم. در این قسمت از سری آموزش جی کوئری و افکت ها, به افکت Sliding در jQuery یا همان افکت کشویی می پردازیم.
متدهای slideUp() و slideDown() جی کوئری
متدهای slideUp() و slideDown() در جی کوئری برای نمایش یا مخفی کردن عناصر HTML بصورت تدریجی با کاهش یا افزایش ارتفاع آن ها (اسلاید به بالا یا پایین) استفاده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ // Slide up displayed paragraphs $(".up-btn").click(function(){ $("p").slideUp(); }); // Slide down hidden paragraphs $(".down-btn").click(function(){ $("p").slideDown(); }); }); </script> |
همانند دیگر متدهای افکت جی کوئری, می توانید یک مقدار پارامتر مدت زمان یا سرعت برای متدهای slideUp() و slideDown() به منظور کنترل اینکه انیمیشن چه مدت طول بکشد, مشخص کنید.
مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘slow’ یا ‘fast’ , یا عددی در میلی ثانیه برای دقت بیشتر یا انیمیشن های آرام تر استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(document).ready(function(){ // Sliding up displayed paragraphs with different speeds $(".up-btn").click(function(){ $("p.normal").slideUp(); $("p.fast").slideUp("fast"); $("p.slow").slideUp("slow"); $("p.very-fast").slideUp(50); $("p.very-slow").slideUp(2000); }); // Sliding down hidden paragraphs with different speeds $(".down-btn").click(function(){ $("p.normal").slideDown(); $("p.fast").slideDown("fast"); $("p.slow").slideDown("slow"); $("p.very-fast").slideDown(50); $("p.very-slow").slideDown(2000); }); }); </script> |
همچنین می توانید یک تابع بازگشتی (callback) برای اجرا بعد از تکمیل متدهای slideUp() و slideDown() مشخص کنید.
در مورد تابع بازگشتی در بخش های آینده بیشتر آموزش می دهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> $(document).ready(function(){ // Display alert message after sliding up paragraphs $(".up-btn").click(function(){ $("p").slideUp("slow", function(){ // Code to be executed alert("The slide-up effect is completed."); }); }); // Display alert message after sliding down paragraphs $(".down-btn").click(function(){ $("p").slideDown("slow", function(){ // Code to be executed alert("The slide-down effect is completed."); }); }); }); </script> |
متد slideToggle() جی کوئری
متد slideToggle() , عنصر انتخاب شده را با متحرک سازی ارتفاع آن ها مخفی یا نمایش می دهد. به اینصورت که اگر محو باشند آن را نمایان می کند و اگر نمایان باشد محو می کند.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Toggles paragraphs display with sliding $(".toggle-btn").click(function(){ $("p").slideToggle(); }); }); </script> |
برای کنترل سرعت افکت Sliding در jQuery نیز می توانید برای متد fadeToggle() یک مدت زمان را تعیین کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ // Slide Toggles paragraphs with different speeds $(".toggle-btn").click(function(){ $("p.normal").slideToggle(); $("p.fast").slideToggle("fast"); $("p.slow").slideToggle("slow"); $("p.very-fast").slideToggle(50); $("p.very-slow").slideToggle(2000); }); }); </script> |
تابع بازگشتی را به این صورت می توانید برای متد slideToggle() مشخص کنید :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ // Display alert message after slide toggling paragraphs $(".toggle-btn").click(function(){ $("p").slideToggle(1000, function(){ // Code to be executed alert("The slide-toggle effect is completed."); }); }); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از افکت Sliding در jQuery نهایت استفاده را برده باشید.
در بخش بعدی با افکت انیمیشن jQuery , آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
