آموزش جی کوئری – افکت محو شدن در jQuery

در بخش قبلی افکت show و hide را بررسی کردیم. در این قسمت از سری آموزش جی کوئری و افکت ها, به افکت محو شدن در jQuery یا همان fading می پردازیم.

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

می توانید از متدهای fadeIn() و fadeOut() در جی کوئری برای نمایش یا مخفی کردن عناصر HTML به تدریج و با افزایش یا کاهش شفافیت (opacity) آن استفاده کنید.

<script type="text/javascript">
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</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>

همانند دیگر متدهای افکت جی کوئری, بصورت اختیرای می توانید یک مقدار برای پارامتر مدت زمان یا سرعت برای متدهای fadeIn() و fadeOut() به منظور کنترل انکه چه مدت افکت محو شدن در jQuery اجرا شود.

مدت زمان می تواند یکی از عبارات از پیش تعیین شده بصورت رشته مانند ‘slow’ یا ‘fast’ , یا عددی در میلی ثانیه برای دقت بیشتر یا انیمیشن های آرام تر استفاده کنید.

<script type="text/javascript">
$(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>

$(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() مشابه show() / hide() هستند برخلاف آنها, متدهای fadeIn() و fadeOut() فقط شفافیت آنها عناصر هدف را متحرک می کند و انیمیشنی برای ابعاد اعمال نمی کند.

همچنین می توانید یک تابع بازگشتی (callback) بعد از تکمیل افکت محو شدن در jQuery با متدهای fadeIn() و fadeOut() اجرا کنید.

در مورد تابع بازگشتی در بخش های آینده بیشتر آموزش می دهیم.

<script type="text/javascript">
$(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>

$(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() در جی کوئری

متد fadeToggle() جی کوئری, عنصر انتخاب شده را با متحرک سازی شفافیت آن ها مخفی یا نمایش می دهد. به اینصورت که اگر محو باشند آن را نمایان می کند و اگر نمایان باشد محو می کند.

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

$(document).ready(function(){

// Toggles paragraphs display with fading

$(".toggle-btn").click(function(){

$("p").fadeToggle();

});

</script>

برای کنترل سرعت افکت fading نیز می توانید برای متد fadeToggle() یک مدت زمان را تعیین کنید.

<script type="text/javascript">
$(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>

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

همچنین امکان مشخص کردن تابع بازگشتی برای متد fadeToggle() وجود دارد.

<script type="text/javascript">
$(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>

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

متد fadeTo()جی کوئری مشابه متد fadeIn() است اما برخلاف آن, متد fadeTo() به شما امکان مشخص کردن سطح شفافیت مشخص را می دهد.

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

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

مقدار پارامتر opacity مشخص می کند که شفافیت نهایی المان هدف می تواند بین ۰ و ۱ باشد. پارامتر مدت زمان یا سرعت نیز برای این متد ضروری است که انیمیشن fade چه مقدار طول بکشد.

<script type="text/javascript">
$(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>

$(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 نهایت استفاده را برده باشید.

در بخش بعدی با افکت Sliding در jQuery , آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

آموزش جی کوئری – افکت محو شدن در jQuery

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

متد fadeToggle() در جی کوئری

متد fadeTo()

آموزش جی کوئری – متوقف کردن انیمیشن جی کوئری

آموزش جی کوئری – افکت انیمیشن jQuery

آموزش جی کوئری – افکت Sliding در jQuery

آموزش جی کوئری – افکت show و hide در جی کوئری

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه