divをアニメーション化してスライダダウンした

Question

新しいjQueryを作成するdivをアニメーション化するコードを左手側から右手側にスライダダウンしてしまいました。スライダダウン前のdivの高さは約10pxになり、スライダダウンは351pxになります。 私は上記を個別に行うことができますが、組み合わせることはできません！少しガイダンスをありがとう、ありがとう。 これは私の現在のコードです。

$.hideAllExcept = function(tabs,boxes){ 
function init() { 

    // make it bookmarkable/refreshable. but, no history. 
    var hash = window.location.hash; 
    (!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash); 

    // add click handler. 

    $(tabs).click(function(e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    // add back the hash which is prevented by e.preventDefault() 
    window.location.hash = href; 
    hideShow(href); 
    }); 
} 

function hideShow(el) { 


    $(boxes).animate({"left": "-650px"}, "slow"); 
    $(el).fadeIn('slow').animate({"left" : "60%",height:"351" }, 1000); 

$(tabs).removeClass('active'); 
     $('a[href="' + el + '"]').addClass('active'); 
    } 
    init(); 

}; 

---

は少し進歩を遂げました！ 私はそれが一時サーバー上で実行されているんだ：

http://www.tridentsolutions.co.nz/test-folder/index.html#construction_home

しかし、テキストはHTMLであるように私は、また、テキストが表示されているかを確認LHSに戻るには、ボックスを取得することはできませんし、 divのイメージではなく、テキストを隠すことができないということですか？事前に おかげ

(function($){ 

$.hideAllExcept = function(tabs,boxes){ 
    function init() { 

     // make it bookmarkable/refreshable. but, no history. 
     var hash = window.location.hash; 
     (!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash); 

     // add click handler. 

     $(tabs).click(function(e) { 
     e.preventDefault(); 
     var href = $(this).attr('href'); 
     // add back the hash which is prevented by e.preventDefault() 
     window.location.hash = href; 
     hideShow(href); 
     }); 
    } 

function hideShow(el) { 

    $(el).animate({"left": "-650px"}, "slow").fadeIn('slow'); 
    $(el).fadeIn('slow').animate({"left" : "60%" }, 1000).animate({"height" : "351" }, 1000); 


$(tabs).removeClass('active'); 
     $('a[href="' + el + '"]').addClass('active'); 
    } 
    init(); 

}; 

Answer 1

は、あなたが2つの効果が一緒にチェーン化しようとしたことがありますか？ 2アニメーション（）関数にそれらを破ると、あなたが望む順番でチェーン：

$(el).fadeIn('slow').animate({"left" : "60%"}, 1000).animate({"height:"351" }, 1000); 

各アニメーション（）関数は、順番に実行されますので、あなたは効果次々任意の数を行うことができます。

Answer 2

使用すると、1つのアニメーション.animateのコールバックを使用して、別の終了後に発射する場合：

擬似っぽいコード：

$(selector).animate({ key: val }, 
        'slow' /*easing*/, 
         function() { 
          // second animation goes here 
        });