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

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

如果我理解正确 - 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 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");
}

动画切换只是一种方式

3 个答案: