Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Fading in and out an element using jQuery

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 273
    Comment on it

    Sometimes we want an image, control or element in a page to fade in and out of visibility .With jQuery it can be done easily. Below are examples of fade in and out method for a div element:

    Fade In: fadeIn() method is used to fade in a hidden element.
    Syntax : $(element id).fadeIn(fading speed,callback);

    Here fading speed is optional which specifies the duration of the effect. It can take the values: "slow", "fast", or numeric speed value in milliseconds and callback parameter is also optional which is a function to be executed after the fading completes. For eg :
    $("#div1").fadeIn();
    $("# div1").fadeIn("slow");
    $("# div1").fadeIn(5000);

    Fade Out: fadeOut() method is used to fade out a visible element.
    Syntax : $(element id).fadeOut(fading speed,callback);

    Here also fading speed is optional which specifies the duration of the effect. It can take the values: "slow", "fast", or numeric speed value in milliseconds and callback parameter is also optional which is a function to be executed after the fading completes. For eg :
    $("#div1"). fadeOut (); 
    $("# div1"). fadeOut ("slow"); 
    $("# div1"). fadeOut (5000);


    Fade Toggle : fadeToggle() method toggles between the fadeIn() and fadeOut() methods. That means if element is hidden it makes the element visible and if element is visisble, fadeTogggle() hides the element.
    Syntax : : $(element id).fadeToggle(fading speed,callback);
    Where fading speed and callback are same as above (in fadeIn() and fadeout()). For eg:
    $("#div1"). fadeToggle ();  
    $("# div1"). fadeToggle ("slow");
    $("# div1"). fadeToggle (5000);

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: