Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • jQuery fadeToggle Method

    @akhil.pandey
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 314
    Comment on it

    In many sites we have seen that when we click on some button it will make some div faded, this will happen with the help of  fadeOut() method in jquery.

    If we want some faded div or hidden div to get show, we can do that by using fadeIn() method .

    fadeToggle method helps us if we want to fadeOut or fadeIn some div at the same time .

    Syntax

    1. $(div to be selected).fadeToggle(speed,callback);

    Speed:- In this parameter, we provide a string which defines the duration for which the effect take place  i.e slow,normal or fast .

    Duration of effect is specified by an optional speed parameter and values: "slow", "fast", or milliseconds can be taken by it.

     

    Below is the jquery code for using this method:-

    1. $(document).ready(function(){
    2.     $("button").click(function(){
    3.         $("#part1").fadeToggle();
    4.         $("#part2").fadeToggle("slow");
    5.         $("#part3").fadeToggle(2000);
    6.     });
    7. });

    Below is the html code:-

    2. <button>Click here</button><br><br>
    3.  
    4. <div id="part1"></div>
    5. <br>
    6. <div id="part2"></div>
    7. <br>
    8. <div id="part3"></div>

    Below is the css for above code:-

    1. #part1{
    2.        width:100px;
    3.        height:100px;
    4.        background-color:grey;
    5. }
    6. #part2{
    7.        width:100px;
    8.        height:100px;
    9.        background-color:red;
    10. }
    11. #part3{
    12.        width:100px;
    13.        height:100px;
    14.        background-color:blue;
    15. }
    16.  
    17.  
    18.  

     

    JQuery Javascript
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: