これは、jQuery を使用する最初のプロジェクトの 1 つです。私はそれの大部分を完成させ、必要な方法で作業しています。
私が抱えている問題の 1 つは、アクティブな状態でナビゲーション項目をクリックすると、2 つのサイド バイ サイド パネルが同時に元の状態にアニメーション化されないことです。
「サービス」というラベルの付いた左側のパネルは、.slideUp を使用しています。右側のパネルには、これまでに選択され、.animate を使用しているナビゲーション項目が表示されています。
両方を同時にスライドさせたいのですが、これを行うために使用できる方法を知っている人はいますか?
$(document).ready(function() {
$('nav a').bind('click', function() {
var page = $(this).attr('rel');
var pageElement = $('#' + page);
// slide down services box
$("#slide-down").animate({
"height": "240px"
});
// create div for service content
$("#pages-wrap").slideDown();
if($(pageElement).hasClass('open')) {
// This page is already open, so just close it
$('#pages div.open').slideUp().removeClass();
$("#pages-wrap").slideUp();
$('#slide-down').animate({"height": "100px"});
} else {
// This page is not open
if($('#pages div.open').length > 0) {
// There are other pages open, close them then open new one
$('#pages div.open').removeClass('open').fadeOut(function() {
$('#pages div#' + page).fadeIn().addClass('open');
});
} else {
// No other pages open, just open this one
$('#pages div#' + page).slideDown().addClass('open');
}
}
});
});