jquery - jquery .click（function）が正しく機能しない

Question

現在、いくつかのアニメーションを含むクリックイベントがあります。アニメーションに実行させたいことの基本を理解しました。これが私がやったことです。コードブレーク後、問題について説明します。

$(document).ready(function(){
$('.hidden').hide().removeClass('hidden');

$('.about-prj-tog').click(function(event){      
    $('#logo-wrapper').animate({height:'toggle'}, 1000);
    $('#logo').delay(100).animate({height:'toggle'}, 1000);
    $('#about-prj').animate({height:'toggle'}, 1000);
    return false;
});
$('.weekly-tog').click(function(event){     
    $('#logo-wrapper').animate({height:'toggle'}, 1000);
    $('#logo').delay(100).animate({height:'toggle'}, 1000);
    $('#weekly-updates').animate({height:'toggle'}, 1000);
    return false;
});
$('.submit-story-tog').click(function(event){       
    $('#logo-wrapper').animate({height:'toggle'}, 1000);
    $('#logo').delay(100).animate({height:'toggle'}, 1000);
    $('#submit-drop-down').animate({height:'toggle'}, 1000);
    return false;
});

$('.x-icon').click(function(event){
    $('#logo-wrapper').animate({height:'toggle'} );
    $('#logo').show();
    $('#about-prj').animate({height:'toggle'} );
    $('#weekly-updates').animate({height:'toggle'} );
    $('#submit-drop-down').animate({height:'toggle'} );
});

}）;

おそらくお気づきかもしれませんが、私が抱えている問題は、最初のリンクをクリックしたときです。アニメーションが発生し、見栄えがします。しかし、次のリンクをクリックすると、他のアニメーションが最初のアニメーションの下で発生します。-最初のアニメーションが最初に閉じられ、2番目のアニメーションが発生することはありません。

わかる？

また、コードを統合してより効率的にするためのヒント。同じことを3回書き、クラスとIDを変更しただけだと気づきました。jqueryをさらに理解するのに役立つ、より少ないコードを書くためのより良い方法があれば。

また、.x​​-icondivをクリックすると あらゆる種類の狂気が起こります。