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 パネルをアニメーション化して元の位置に戻すには、ここで何をする必要がありますか?