Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Jquery FadeToggle

    Hello..
    I want to make a jquery fadetoggle
    See this first
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });
    });
    </script>
    </head>
    <body>
    
    <p>Demonstrate fadeToggle() with different speed parameters.</p>
    <button>Click to fade in/out boxes</button>
    <br><br>
    
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    
    </body>
    </html>
    The rectangles fade in and fade out in different time..

    But, i see what i dont want here :
    - The rectangle jumps up after another rectangle finishes fading out
    - The rectangles are visible at the first look..

    But, when i try this code :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
       $("button").toggle(function(){
      
        $('div').eq(0).fadeToggle(function()
                                    {
                                    $('div').eq(0).removeClass('hide').addClass('show')
                                    });
        $('div').eq(1).fadeToggle("slow",function()
                                    {
                                    $('div').eq(1).removeClass('hide').addClass('show')
                                    });
        $('div').eq(2).fadeToggle(3000, function()
                                    {
                                    $('div').eq(2).removeClass('hide').addClass('show')
                                    });
      } , function(){
        $('div').eq(0).removeClass('show').addClass('hide').fadeToggle();
        $('div').eq(1).removeClass('show').addClass('hide').fadeToggle("slow");
        $('div').eq(2).removeClass('show').addClass('hide').fadeToggle(3000);
      });
      
    });
    </script>
    <style>
    .hide{display:block !important; visibility:hidden;}
    .show{display:none; visibility:visible;}
    </style>
    </head>
    <body>
     
    <p>Demonstrate fadeToggle() with different speed parameters.</p>
    <button>Click to fade in/out boxes</button>
    <br><br>
     
    <div class="hide" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div class="hide" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div class="hide" style="width:80px;height:80px;background-color:blue;"></div>
     
    </body>
    </html>
    The code isn't working... Could you please fix the code and give it to me?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The code isn't working... Could you please fix the code and give it to me?
    You seem to be just guessing rather than spending a couple of minutes reading the docs.. even more so as you are demonstrating the feature?!
    Last edited by AndrewGSW; 01-02-2013 at 02:16 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •