0

私がやろうとしているのは、開いているメニュー1で、「クリックして開始」と表示されています。現在「これはメニュー2です」と表示されているメニュー2は、作成目的で非表示になっています。次に、最初のクリックでメニュー1が非表示になり、メニュー2が表示され、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

トグル要素を適用しているため、コードは正しくありませんが#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 に答える
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 に答える
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 に答える