動畫一個div，也讓它滑動

Question

作爲新的jQuery我無法合併代碼有一個div從左側到右側然後slidedown動畫。滑動前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

但我不能讓箱子返回到LHS也看到文字是如何可見的，因爲文字是在html和不是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

你試過鏈接兩個效果起來呢？打破他們分成兩個動畫（）函數，然後把它們連在你想要的順序：

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

每個動畫（）函數中的順序運行，所以你可以做一前一後的任何數量的影響。

Answer 2

如果你想要一個動畫到另一個完成後開火，使用.animate的回調：

僞ISH代碼：

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