Site icon T4Tutorials.com

JQuery Fade

Fade In Method in JQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#T1").fadeIn();
        $("#T2").fadeIn("slow");
        $("#T3").fadeIn(3500);
    });
});

Try it

Fade out Method in JQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#T1").fadeOut();
        $("#T2").fadeOut("slow");
        $("#T3").fadeOut(3200);
    });
});

Try it

Fade To Method in JQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#T1").fadeTo("slow", 0.20);
        $("#T2").fadeTo("slow", 0.12);
        $("#T3").fadeTo("slow", 0.10);
    });
});

Try it

Fade Toggle Method in JQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#T1").fadeToggle();
        $("#T2").fadeToggle("slow");
        $("#T3").fadeToggle(3300);
    });
});

Try it

Video Lecture

Exit mobile version