terryds Posted December 31, 2012 Share Posted December 31, 2012 Hi, i want to ask about fadetoglgle in jQuery..See this <!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> What i see first is the three rectangles are visible.. How to make it invisible ?So, when i click the toggle, it fades in and when i click the toggle again, it fades out.. How to make it? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 31, 2012 Share Posted December 31, 2012 Use toggle() instead of click() and then animate opacity to 0, on first click, second click animate opacity back to 1. By default the element when fully faded out, uses display: none; at end, meaning the element area is taken out of flow of the other elements and these other elements will fill the empty space it had occupied. To use fadeOut, you would have run a function to return it to display:block; and then use visibility: hidden; for when the fadeOut had finished, then change to display:none; visibility: visible; and THEN run fadeIn function when the button is clicked for second time. Link to comment Share on other sites More sharing options...
terryds Posted January 1, 2013 Author Share Posted January 1, 2013 Could you please give the code for me? Link to comment Share on other sites More sharing options...
Labtec Posted January 1, 2013 Share Posted January 1, 2013 (edited) I've had a quick look at your code and got it to work as you wanted. It isn't the best code, but it works: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css"> .hide{ display: none;}</style><script>$(document).ready(function(){ var div1 = $('#div1'), div2 = $('#div2'), div3 = $('#div3'); div1.addClass('hide'); div2.addClass('hide'); div3.addClass('hide'); $("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> This hide's your div's when the page first loads, then when you click the button anytime after that, it will either show/hide the divs. This probably isn't the best way to do it, I'd suggest using removeClass in conjunction with the fadeToggle() function because even when the <div>'s are visible on the screen, they still have the hide class applied, which probably isn't ideal. Hope it helps, Regards, Lab. Edited January 1, 2013 by Labtec 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2013 Share Posted January 1, 2013 $(document).ready(function(){ //var div1 = $('#div1'), div2 = $('#div2'), div3 = $('#div3'); $('#div1, #div2, #div3').addClass('hide'); //div2.addClass('hide'); //div3.addClass('hide'); $("button").click(function(){ $('#div1').fadeToggle(), $('#div2').fadeToggle("slow"), $('#div3').fadeToggle(3000); });}); or $(document).ready(function(){ $('div').addClass('hide'); $("button").click(function(){ $('div').eq(0).fadeToggle(), $('div').eq(1).fadeToggle("slow"), $('div').eq(2).fadeToggle(3000); });}); Like i said to prevent boxes jumping up and down, as display:none is applied by fadetoggle() you would have to reset it and use visibility to hide the box, but the class example given, gave me and idea how to use fadetoggle(), instead of animate and fadein() and fadeout(), which seems to work. $(document).ready(function(){ $("button").toggle(function(){ $('div').eq(0).fadeToggle(function() { $('div').eq(0).removeClass('show').addClass('hide') //reset display: none to display: block and use visibility by using class with !important } ); $('div').eq(1).fadeToggle("slow",function() { $('div').eq(1).removeClass('show').addClass('hide')//reset display: none to display: block and use visibility by using class with !important }); $('div').eq(2).fadeToggle(3000, function() { $('div').eq(2).removeClass('show').addClass('hide')//reset display: none to display: block and use visibility by using class with !important }); } , function(){ $('div').eq(0).removeClass('hide').addClass('show').fadeToggle(); //reset to default display(display:none) using class, so fadetoggle() will then apply fade In effect $('div').eq(1).removeClass('hide').addClass('show').fadeToggle("slow");//reset to default display(display:none) using class, so fadetoggle() will then apply fade In effect $('div').eq(2).removeClass('hide').addClass('show').fadeToggle(3000);//reset to default display(display:none) using class, so fadetoggle() will then apply fade In effect }); }); .hide{display:block !important; visibility:hidden;}.show{display:none; visibility:visible;} 1 Link to comment Share on other sites More sharing options...
terryds Posted January 2, 2013 Author Share Posted January 2, 2013 (edited) But, the first visibility of the rectangles are visible.. How to make ithem invisible at the first time i see them? Edited January 2, 2013 by terryds 1 Link to comment Share on other sites More sharing options...
Labtec Posted January 2, 2013 Share Posted January 2, 2013 (edited) Hehe quality Although you know inline styles are frowned upon unless absolutely necessary dsonesuk's example wins I think though, give it a try ^ Regards, Labb Edited January 2, 2013 by Labtec Link to comment Share on other sites More sharing options...
terryds Posted January 2, 2013 Author Share Posted January 2, 2013 How to make it invisible at the first look ? Link to comment Share on other sites More sharing options...
Labtec Posted January 2, 2013 Share Posted January 2, 2013 (edited) You can apply visibility: hidden to your HTML: <div id="div1" style="width:80px;height:80px;background-color:red; visibility: hidden;"></div> Of course it depends what method you want to use, there are many ways to do it. Regards, Lab Edited January 2, 2013 by Labtec Link to comment Share on other sites More sharing options...
terryds Posted January 2, 2013 Author Share Posted January 2, 2013 If i use that, the toggle won't work..Just give me a working code..I want to make the rectangle are invisible first, then when i click the toggle, it fades in and fades out without jumping up Link to comment Share on other sites More sharing options...
Labtec Posted January 2, 2013 Share Posted January 2, 2013 (edited) See dsonesuk's post at #5. Using display: none will affect the 'jumping'. By using visibility: hidden the elements keep their position on the page and prevent the 'jumping'. Regards, Lab Edited January 2, 2013 by Labtec Link to comment Share on other sites More sharing options...
terryds Posted January 2, 2013 Author Share Posted January 2, 2013 (edited) Could you tell me why this code isn't working : <!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> Edited January 2, 2013 by terryds Link to comment Share on other sites More sharing options...
dsonesuk Posted January 2, 2013 Share Posted January 2, 2013 You just need to swap the toggle code, it assumes the elements are shown on first click $(document).ready(function(){ $('div').addClass('hide'); $("button").toggle(function(){ $('div').eq(0).stop(true,true).removeClass('hide').addClass('show').fadeToggle(); $('div').eq(1).stop(true,true).removeClass('hide').addClass('show').fadeToggle("slow"); $('div').eq(2).stop(true,true).removeClass('hide').addClass('show').fadeToggle(3000); }, function(){ $('div').eq(0).stop(true,true).fadeToggle(function() { $('div').eq(0).removeClass('show').addClass('hide') } ); $('div').eq(1).stop(true,true).fadeToggle("slow",function() { $('div').eq(1).removeClass('show').addClass('hide') }); $('div').eq(2).stop(true,true).fadeToggle(3000, function() { $('div').eq(2).removeClass('show').addClass('hide') }); } ); }); 1 Link to comment Share on other sites More sharing options...
terryds Posted January 4, 2013 Author Share Posted January 4, 2013 (edited) Yeah.. That's working.. Thank you.. But, i have something to ask...I see that the second function of toggle is below.. function(){ $('div').eq(0).stop(true,true).fadeToggle(function() { $('div').eq(0).removeClass('show').addClass('hide') } ); $('div').eq(1).stop(true,true).fadeToggle("slow",function() { $('div').eq(1).removeClass('show').addClass('hide') }); $('div').eq(2).stop(true,true).fadeToggle(3000, function() { $('div').eq(2).removeClass('show').addClass('hide') }); Why is that different from this one below $('div').eq(0).stop(true,true).removeClass('show').addClass('hide').fadeToggle(); $('div').eq(1).stop(true,true).removeClass('show').addClass('hide').fadeToggle("slow"); $('div').eq(2).stop(true,true).removeClass('show').addClass('hide').fadeToggle(3000); } ); This code above isn't working.. Can you explain me why ? :D Edited January 4, 2013 by terryds Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2013 Share Posted January 4, 2013 With the first, when the fade toggle is carried out, it uses display none, which will cause boxes to collapse, so after each of these fading is taking place, it resets the boxes to display: block; and uses invisiblity: hidden; the invisibility styling hides the box, but the area it occupies remains. On the second because we reset display:none; to display: block; the fadeIn won't work, so we have to reset back to its normal fadeout setting of display:none; and set invisibility to visible; before the fadetoggle takes place. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now