021-20483015

افکت 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();
}); 
مشاهده مثال

 

 

 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط