1

JQuery アニメーションをトリガーする一連のボタンがあり、パネルがページの下部の下にスライドします。パネルはページの下に完全に配置され、ボタンをクリックすると、対応するパネルがアニメーション化されます。

機能はうまく機能しますが、一度に 1 つのパネルしか表示できないようにしたいと考えています。

私のHTMLは： 

<div id="footerNav">
<a class="button" id="b1" href="#"><span></span>Upcoming Events</a>
<a class="button" id="b2" href="#"><span></span>From the Blog</a>
<a class="button" id="b3" href="#"><span></span>Global Leaders</a>
<a class="button" id="b4" href="#">Watch Video</a>
</div>

<div id="paneb1" class="pane"></div>
<div id="paneb2" class="pane"></div>
<div id="paneb3" class="pane"></div>

私のJqueryは次のとおりです。

$("a.button").toggle(function(){
     idClick = $(this).attr("id");
     newSelector = $("#pane"+idClick);
     newSelector.animate({ 'bottom' : 99});
     $(this).addClass("activeBtn");
}, function(){
     newSelector.animate({ 'bottom' : -275});
     $(this).removeClass("activeBtn");
});

そのように not セレクターを使用してみましたが、うまくいきませんでした:

$(".pane:not(newSelector)").animate({ 'bottom' : -275});

ボタンが切り替えられたときに OTHER パネルをアニメーション化して元の位置に戻すには、ここで何をする必要がありますか?

4

2 に答える 2

1

セレクターnot()の代わりにメソッドを使用できます。:not()

$(".pane").not(newSelector).animate({ bottom : -275 });

グローバル変数の代わりにローカル変数を使用する方が良いことに注意してください。そのためvar、新しい変数を定義するときにキーワードを使用することを検討してください。

var newSelector = $("#pane" + idClick);
于 2012-10-25T17:02:56.760 に答える
1

試す：

$(".pane").not(newSelector).animate({ 'bottom' : -275});

お使いのバージョンには、作成した JavaScript var への参照がないため、「newSelector」という名前のセレクターを探しています。

于 2012-10-25T17:03:33.790 に答える