افکت‌ها در jQuery | قسمت اول: افکت‌های Show ،Hide و Fading

در ادامه‌ ی سری آموزش جی کوئری از مقدماتی تا پیشرفته، به بررسی افکت های jQuery می پردازیم. این درس به متدهای Show ،Hide و Fading اختصاص دارد.

متدهای ()Show و ()Hide در jQuery

در این آموزش به متدهای ()show و ()hide در jQuery می پردازیم. این متدها از سری متدهای افکت های jQuery محسوب می شوند که جهت تعامل کاربران با برنامه از آن ها بهره می برند. در واقع شما می توانید با استفاده از متدهای ()show و ()hide عناصر html را ظاهر یا پنهان کنید.

متد ()hide در واقع یک استایل display:none را به صورت inline به استایلی که برای عنصر html موجود است، اضافه می کند. در واقع شما با استفاده از Selector ها که در آموزش های قبلی jQuery بررسی شد، عنصر یا عناصری را انتخاب و این ویژگی ها را بر آن ها اعمال می کنید. متقابلا با استفاده از متد ()show می توانید عنصری را که پنهان است، ظاهر سازید. در حقیقت متد ()show، ویژگی های مربوط به صفت display در عنصر را به حالت اولیه آن بر می گرداند که قبل از آن که display:none تنظیم شود، نوعا block ،inline یا inline-block هستند.

کد مثال زیر این کاربرد را نشان می دهد:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

اگر لازم بدانید این امکان برای شما وجود دارد تا با تنظیم پارامتری که آن را duration می نامیم، زمانی را جهت اعمال افکت های hide یا show تعیین کنید. در واقع این پارامتر مقداری از زمان را می گیرد که افکت ها بر اساس آن با سرعت خاصی اعمال می شوند.

پارامتر duration می تواند با مقادیر پپیش فرضی هم چون "slow" یا "fast" تنظیم شود. همچنین می توانید از یک عدد که در واحد میلی ثانیه تعبیر می شود، استفاده کنید. هر چه مقدار این عدد بیشتر باشد، زمان اجرای افکت بیش تر است و هر چه مقدار این عدد کم تر باشد، افکت show یا hide با سرعت بیش تر و طی زمان کم تر اعمال می شوند.

در کد زیر کاربرد این پارامتر را مشاهده کنید:

<script>
$(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" که به پارامتر duration نسبت داده می شود، عدد 200 میلی ثانیه را نشان می دهد و سرعت یا زمان "slow" عدد 600 میلی ثانیه را برای افکت نشان می دهد.

اگر بخواهید می توانید از یک تابع callback در افکت های show یا hide استفاده کنید که عملکرد تابع callback بعد از اجرای کامل افکت ها خود را نشان می دهد و اجرا می شود. در قسمت های بعدی مطالب بیشتری راجع به توابع callback مشاهده خواهید کرد.

کد مثال زیر کاربرد این تابع را در ساختار افکت ها نشان می دهد:

<script>
$(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 در jQuery

عملکرد متد ()toggle که در واقع افکتی را اعمال می کند بر اساس مقدار و حالت اولیه یک عنصر تعریف می شود. اگر عنصر در حالت "پنهان" قرار گرفته باشد، با عملکرد متد ()toggle ظاهر می گردد و اگر عنصر در حالت اولیه به وضعیتی که در صفحه به کاربر نشان داده شود قرار داشته باشد، یعنی «ظاهر» باشد، با عملکرد متد ()toggle عنصر مربوطه از دید کاربر «پنهان» خواهد شد.

در کد مثال زیر این کاربرد بررسی شده است:

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

همان طور که پارامتر duration را جهت کنترل سرعت اجرای افکت های show و hide تعیین کردید، می توانید این پارامتر را با همین کاربرد نیز برای toggle بکار برید.

در کد زیر مشاهده کنید:

<script>
$(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 نیز می توانید از تابع callback استفاده کنید که در کد زیر مثالی از آن آورده شده است:

<script>
$(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>

افکت های Fading در jQuery

در ادامه، با نمونه ای دیگر از افکت های jQuery با عنوان Fading آشنا می شوید و مشاهده می کنید که متدهایی که این افکت را اجرا می کنند، چگونه عنصر یا عناصری را از html را محو یا عناصر محو شده را ظاهر می کنند.

متدهای ()fadeIn و ()fadeOut در jQuery

شما می توانید با استفاده از متدهای ()fadeIn یا ()fadeOut عناصر html را نمایش دهید یا محو کنید. این کار با کاهش و افزایش شفافیت عنصر مربوطه صورت می گیرد.

در حقیقت تفاوتی که بین متدهای fading و متدهای ()show و ()hide وجود دارد، این است که متدهای ()show و ()hide با دستکاری صفت display که مربوط به css است یک عنصر را ظاهر یا پنهان و مخفی می کند، نه آن که عنصر را محو کند (محو کردن به معنای عدم نمایش به دلیل کاهش وضوح عنصر می باشد).

در کد مثال زیر کاربرد متدهای ()fadeIn و ()fadeOut را نیز مشاهده کنید:

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

مانند سایر متدهای مربوط به افکت ها در jQuery، شما این امکان را خواهید داشت تا با استفاده از پارامتر duration، سرعت اجرای متدهای مربوط به این افکت fading را کنترل کنید. در واقع زمانی را جهت اجرای fading تعیین کنید. برای این منظور می توانید از مقادیر پیش فرض "slow" یا "fast" استفاده یا یک عدد را به عنوان مقدار duration اعمال کنید. این عدد در واحد میلی ثانیه است که مقدار بیشتر آن سرعت اجرای کندتر را نشان می دهد و مقدار کمتر سرعت اجرای سریع تر را نشان می دهد.

در کد زیر استفاده از duration را افکت های fading می بینید:

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

نکته: همان طور که در بالا به آن اشاره شد، متدهای ()fadeIn و ()fadeOut بر وضوح یا opacity یک عنصر اعمال می شود و برخلاف متدهای ()show و ()hide روی ابعاد یک عنصر تاثیری نمی گذارد.

همچنین شما می توانید از تابع callback در افکت های fading و متدهای آن استفاده کنید که این تابع بعد از اجرای متدهای ()fadeIn یا ()fadeOut اجرا می گردد. در رابطه با تابع callback در قسمت های بعدی مطالب بیشتری را مشاهده خواهید.

کد زیر استفاده از تابع callback در متدهای fading نشان می دهد:

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

متد ()fadeToggle در jQuery

متد ()fadeToggle براساس وضعیت اولیه اقدام به نمایش یا محو عنصر یا عناصر انتخاب شده می کند. اگر در حالت اولیه عنصر یا عناصر انتخاب شده در حالت نمایان قرار گرفته شوند، متد ()fadeToggle اقدام به محو کردن و کاهش وضوح آن عنصر یا عناصر می کند و اگر حالت اولیه عنصر یا عناصر انتخاب شده در حالت محو شده باشد، با عملکرد متد ()fadeToggle عنصر یا عناصر انتخاب شده نمایان خواهند شد.

این عملکرد در کد مثال زیر بررسی شده است:

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

به طریق مشابه که برای متدهای ()fadeIn و ()fadeOut شرح داده شد، می توانید از پارامتر duration جهت تعیین سرعت اجرای متد ()fadeToggle استفاده کنید.

در کد زیر می توانید این کاربرد را مشاهده کنید:

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

به طریق مشابه که برای متدهای بالا از تابع callback استفاده شد، می توانید از تابع callback در متد ()fadeToggle نیز استفاده کنید. کد مثال زیر استفاده از تابع callback در متد ()fadeToggle را نیز نشان می دهد:

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

متد ()fadeTo در jQuery

عملکرد متد ()fadeTo مانند عملکرد متد ()fadeIn می باشد، با این تفاوت که در متد ()fadeTo می توانید تعیین کنید که عنصر انتخاب شده تا حد خاصی از وضوح نمایان شود. ساختار استفاده از ()fadeTo به شرح زیر است:

$(selector).fadeTo(speed, opacity, callback);

پارامتر opacity در ساختار بالا که استفاده از آن اجباری است، مقدار وضوح نهایی را که باید رخ دهد، نشان می دهد. این پارامتر می تواند مقداری بین 0 و 1 داشته باشد.

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

کد زیر استفاده از متد ()fadeTo را نشان می دهد:

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

در این قسمت از افکت های jQuery، افکت های hide ،show و fading بررسی شدند، در قسمت بعدی از افکت های jQuery به slide ها و animation ها خواهیم پرداخت.