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?
Before you post, read our: 
Jquery FadeToggle
