动画切换仅以一种方式工作

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/

我更改了 .whiteboardtext2 的 CSS 规则，只是默认添加了 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");
}