animate toggle only woking one way - jquery-animate

Question

what I am trying to do is on open, menu 1, showing 'Click me to start'. Menu 2, which currently says 'This is menu 2', just for building purposes, is hidden. Then, on first click, menu 1 hides and menu 2 shows, then toggles back on second click. The problem is that once menu 2 is showing and menu 1 is hidden, it won't toggle back.
<div id="nav" class="nav">
<div id="whiteboardtext1" class="whiteboardtext1"><p>Click here to start</p></div>
<div id="whiteboardtext2" class="whiteboardtext2"><p>this is menu number 2</p></div>
</div>​
.nav{
width:700px;
float:left;
}
.whiteboardtext1{
position:absolute;
margin-top:110px;
margin-left:215px;
width:300px;
height:100px;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
.whiteboardtext2{
z-index:1;
position:absolute;
margin-top:50px;
margin-left:50px;
width:650px;
height:350px;
font-size:30px;
cursor:pointer;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
​$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').toggle(
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
},
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').fadeOut();
$('#whiteboardtext1').fadeIn();
})
});
​
I pretty sure the code is correct, but I just can't get it to work.
If anyone can help, I would really appreciate it.
Thank in advance
me

Answer 1

If I understand you correctly - http://jsfiddle.net/M8Tgx/
I changed CSS rules for .whiteboardtext2 just added display:none; by default.
I rewrite your JavaScript to this:
$(document).ready(function(){
$('#whiteboardtext1').click(function(){
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
});
$('#whiteboardtext2').click(function(){
$('#whiteboardtext1').fadeIn();
$('#whiteboardtext2').fadeOut();
});
});​

Answer 2

You code is not correct, because you are applying toggle #whiteboardtext1 element, but when it first call, it hide and the #whiteboardtext2 get displayed, and you dint apply any event on that, so it is not working as you are expecting. and opacity is correct css property.
You can try this to work
$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').show();
$('.nav').on('click', 'div', function() {
var _this =$(this);
_this.stop().animate({
'opacity':'0'
}, 'fast', function(){_this.hide();})
_this.siblings().stop().animate({
'opacity':'1'
}, 'fast').show();
});
});

Answer 3

This is because the toggle handler is bound to the #whiteboardtext1 element. Whenever #whiteboardtext1 is clicked, one text will fade out and the other will fade in, but #whiteboardtext2 has no click handler, so clicking it has no effect.
Also, opasity is not a valid CSS attribute, so animating it has no effect except to delay the subsequent animations. Assuming you wanted to fade the texts in/out, not a delayed sudden change.
Use this:
var $text1=$('#whiteboardtext1');
var $text2=$('#whiteboardtext2');
$text1.click(function(){
$text1.stop().fadeOut("fast");
$text2.stop().fadeIn("fast");
}
$text2.click(function(){
$text2.stop().fadeOut("fast");
$text1.stop().fadeIn("fast");
}