0

我要做的是打开菜单 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();
})
});

​</p>

我很确定代码是正确的，但我无法让它工作。

如果有人可以提供帮助，我将不胜感激。

预先感谢

我

4

3 回答 3

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();
    });
});​
于 2012-10-28T09:42:54.373 回答
1

您的代码不正确，因为您正在应用切换#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();    
    });

});
于 2012-10-28T09:19:12.980 回答
0

这是因为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");
}
于 2012-10-28T09:19:13.913 回答