افکت Slide در jQuery

افکت های jQuery-  Sliding (کشویی)


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


 jQuery متدهای Sliding زیر را دارا است:

()slideDown
()slideUp
()slideToggle


متد ()slideDown


متد ()slideDown برای افکت کشویی رو به پایین عنصر به کار می رود.


شکل دستوری:

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

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند.  مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds

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


مثال زیر روش کار متد ()slideDown را با پارامترهای مختلف نشان می دهد:

slidedown
$("#flip").click(function(){
    $("#panel").slideDown();
}); 
مشاهده مثال


متدslideUp()


متد ()slideUp  برای ایجاد حالت کشویی رو به بالا روی عنصر به کار می رود.


شکل دستوری:

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

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند.  مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر اختیاری callback  تابعی است که پس از پایان اجرای تابع fade اجرا خواهد شد.

 


مثال زیر روش کار متد ()slideUp را با پارامترهای مختلف نشان می دهد:

slideUp
$("#flip").click(function(){
    $("#panel").slideUp();
}); 
مشاهده مثال

 


متد ()slideToggle


متد  ()slideToggle بین دو متد ()slideDown  و  ()slideUp  سوییچ ایجاد می کند.


اگر عناصر افکت کشویی رو به پایین داشته باشند، متد ()slideToggle روی آنها افکت کشویی رو به بالا اعمال خواهد کرد.
اگر عناصر افکت کشویی رو به بالا داشته باشند، متد ()slideToggle روی آنها افکت کشویی رو به پایین اعمال خواهد کرد.

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

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند.  مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر اختیاری callback  تابعی است که پس از پایان اجرای تابع fade اجرا خواهد شد.

 


مثال زیر روش کار متد ()slideToggle را با پارامترهای مختلف نشان می دهد:

slideToggle
$("#flip").click(function(){
    $("#panel").slideToggle();
}); 
مشاهده مثال

 

 

 

 

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز