jQueryメニューアニメーション関数を統合する際のトラブル

Question

メニュー項目をクリックしたときにページ上の特定のdivを縮小するアニメーションエフェクトに取り組んでいます。これにより、メインページの特定の領域で、エンドユーザーのための画面スペースを増やすことができます。

私は、関数の作業がありますが、私はそれを少し整理統合したいと思います。以下は私のコードです：

$('#wp-tabbed-widget-2').click(function() { 
    $('.site-title').animate(
     {fontSize: "16px"}, 
     200); 
    $('.title-area').animate(
     {width: "200px", 
     paddingLeft: "10px"}, 
     400); 
    $('.site-header').animate(
     {minHeight: "50px"}, 
     400); 
    $('#header-logo').animate(
     {width: "40px", 
     paddingLeft: "10px"}, 
     400); 
}); 

私は何を考え出すのトラブルを抱えていることはこれです - 上記のコードは、1つのメニュー項目の罰金に動作しますが、私はこれを適用したいのですが3以上を持っている（のは言わせて＃wp-tabbed-widget-2、... 3、... 4）。私は上記のコードをコピーして貼り付けたいのではなく、新しいボタンに合わせて属性を変更するだけです。怠惰で面倒なようです。

は、私はこれを行うために、クリックされたボタンを監視するための条件のいくつかの並べ替えを記述する必要が知っているが、その仕組みは、今の私を脱出しています。すてきで素敵なものを書くための最善の方法は何でしょうか？

Answer 1

$('#wp-tabbed-widget-2,#wp-tabbed-widget-3,#wp-tabbed-widget-4').click(function() { 
    $('.site-title').animate(
     {fontSize: "16px"}, 
     200); 
    $('.title-area').animate(
     {width: "200px", 
     paddingLeft: "10px"}, 
     400); 
    $('.site-header').animate(
     {minHeight: "50px"}, 
     400); 
    $('#header-logo').animate(
     {width: "40px", 
     paddingLeft: "10px"}, 
     400); 
}); 

ジャストIDの