0

解決策が見つからない場合を除き、StackExchange に多くの質問を投稿しないようにしています。私はまだ jQuery を学習中で、左側のメニュー スライド パネルのアニメーション化に問題があります。

スライド パネルの目的は、データベースから取得した情報とリンクをユーザーに提供することです。1 つのパネルをアニメーション化し、(現在開いているパネルが既にある場合) アニメーション化してアニメーション化する方法を考え出そうとしています。したがって、一度に開くことができるパネルは 1 つだけです。

これまでの私のコードは次のとおりです。

$(".editor_content").hide();

//Panel 1
$('#tab_editor').toggle(function(){
    $('#panel_editor').animate({width:"400px", opacity:1.0}, 500, function() {
        $('.editor_content').fadeIn('slow');
        $('.wrapper').animate({"left": "190px"}, "slow");
    });  
},function(){ 
    $('.editor_content').fadeOut('fast', function() { 
        $('#panel_editor').stop().animate({width:"0", opacity:0.0}, 200);
        $('.wrapper').animate({"left": "0px"}, "slow");
    });
});

//Panel 2
$('#tab_themer').toggle(function(){
    $('#panel_themer').animate({width:"400px", opacity:1.0}, 500, function() {
        $('.themer_content').fadeIn('slow');
        $('.wrapper').animate({"left": "190px"}, "slow");
    });  
},function(){ 
    $('.themer_content').fadeOut('fast', function() { 
        $('#panel_themer').stop().animate({width:"0", opacity:0.0}, 200);
        $('.wrapper').animate({"left": "0px"}, "slow");
    });
});

両方のパネルの CSS は に設定されていfixed top:0 left:0ます。

上記のコードでは、パネルがアニメーション化されますが、パネルをクリックしてアニメーション化すると、開いている現在のパネルをアニメーション化する方法がわかりません。

ヘルプやガイダンスをいただければ幸いです。

前もって感謝します。

4

1 に答える 1

0

javascriptの「this」変数に精通している必要があります。これにより、クリックした要素を開き、他の要素を閉じる関数を作成できます。

これは私が同様の問題を抱えている人のために作ったフィドルです。彼らは他の開いているパネルを閉じながらメニューパネルを開きたいと思っていました。

フィドル

于 2012-08-22T09:40:36.900 に答える