动画仅切换一个方向

Question

我想要做的是打开菜单1，显示'点我开始'。菜单2，目前说'这是菜单2'，仅用于建筑目的，是隐藏的。然后，在第一次点击时，菜单1隐藏并且菜单2显示，然后在第二次点击时切换。问题是一旦菜单2显示并且菜单1被隐藏，它将不会切换回来。

<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(); 
}) 
}); 

我敢肯定的代码是正确的，但我不能得到它的工作。

如果有人能帮忙，我会很感激。

提前感谢

我

Answer 1

如果我理解正确 - http://jsfiddle.net/M8Tgx/

我改变CSS规则.whiteboardtext2只是默认添加display:none;。

我重写你的JavaScript这样的：

$(document).ready(function(){ 
    $('#whiteboardtext1').click(function(){ 
     $('#whiteboardtext1').fadeOut(); 
     $('#whiteboardtext2').fadeIn(); 
    }); 
    $('#whiteboardtext2').click(function(){ 
     $('#whiteboardtext1').fadeIn(); 
     $('#whiteboardtext2').fadeOut(); 
    }); 
});​ 

Answer 2

你的代码是不正确的，因为你申请拨动#whiteboardtext1元素，但是当它第一次调用，它隐藏和#whiteboardtext2得到显示，和你不力应用任何事件在那上面，所以它不像你所期望的那样工作。和opacity是正确的CSS属性。

你可以试试这个工作

$(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

这是因为toggle处理程序绑定到#whiteboardtext1元素。每当单击#whiteboardtext1时，一个文本将淡出，另一个文本将淡入，但#whiteboardtext2没有单击处理程序，因此单击它不起作用。

另外，opasity不是有效的CSS属性，因此对其进行动画处理除了延迟后续动画之外无效。假设你想淡入淡出文本，而不是延迟的突然改变。

使用此：

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"); 
}