动画一个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 
        });