در قسمت قبلی با بحث مهم رویدادها در جی کوئری آشنا شدیم. از این بخش به بعد افکت های مهم در جی کوئری را بررسی می کنیم.
برای این قسمت قصد داریم افکت show و hide در جی کوئری را یاد بگیریم.
متدهای show() و hide() جی کوئری
می توانید المان های HTML را با متدهای show() و hide() در جی کوئری مخفی کنید
متد hide() به سادگی یک استایل درون خطی display: none را برای عنصر انتخابی ست می کند.
برعکس آن متد show() خصوصیت display را به block, inline یا inline-bock برای نمایش مجدد تغییر می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ // Hide displayed paragraphs $(".hide-btn").click(function(){ $("p").hide(); }); // Show hidden paragraphs $(".show-btn").click(function(){ $("p").show(); }); }); </script> |
می توانید بصورت اختیاری یک پارامتر مدت زمان (سرعت) برای ایجاد انیمیشنی افکت show و hide در جی کوئری در دوره زمانی را مشخص کنید.
مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘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(){ // Hide displayed paragraphs with different speeds $(".hide-btn").click(function(){ $("p.normal").hide(); $("p.fast").hide("fast"); $("p.slow").hide("slow"); $("p.very-fast").hide(50); $("p.very-slow").hide(2000); }); // Show hidden paragraphs with different speeds $(".show-btn").click(function(){ $("p.normal").show(); $("p.fast").show("fast"); $("p.slow").show("slow"); $("p.very-fast").show(50); $("p.very-slow").show(2000); }); }); </script> |
نکته: رشته سرعت یا مدت زمان ‘fast’ نشان دهنده ۲۰۰ میلی ثانیه و ‘slow’ نمایانگر ۶۰۰ میلی ثانیه می باشد.
همچنین می توانید یک تابع بازگشتی (callback) برای اجرا بعد از تکمیل متدهای show() یا hide() مشخص کنید.
در مورد تابع بازگشتی در بخش های آینده بیشتر آموزش می دهیم.
|
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 hiding paragraphs $(".hide-btn").click(function(){ $("p").hide("slow", function(){ // Code to be executed alert("The hide effect is completed."); }); }); // Display alert message after showing paragraphs $(".show-btn").click(function(){ $("p").show("slow", function(){ // Code to be executed alert("The show effect is completed."); }); }); }); </script> |
متد toggle() جی کوئری
متد toggle() جی کوئری, عناصر را نمایان یا مخفی می کند به اینصورت که اگر نمایش داده می شود پس مخفی می کند و اگر مخفی باشد آن را نمایان می کند.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Toggles paragraphs display $(".toggle-btn").click(function(){ $("p").toggle(); }); }); </script> |
همچنین می توانید پارامتر مدت زمان را برای متد toggle() برای انیمیشن سازی آن استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ // Toggles paragraphs with different speeds $(".toggle-btn").click(function(){ $("p.normal").toggle(); $("p.fast").toggle("fast"); $("p.slow").toggle("slow"); $("p.very-fast").toggle(50); $("p.very-slow").toggle(2000); }); }); </script> |
تابع بازگشتی را به این صورت می توانید برای متد toggle() مشخص کنید :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ // Display alert message after toggling paragraphs $(".toggle-btn").click(function(){ $("p").toggle(1000, function(){ // Code to be executed alert("The toggle effect is completed."); }); }); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از افکت show و hide در جی کوئری نهایت استفاده را برده باشید.
در بخش بعدی با افکت محو شدن در jQuery , آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
