animating a div and also to have it slidedown

Being new jQuery I having trouble combining the code to have a div animate from the left hand side to the right and then slidedown. The height of the div before slidedown would be about 10px then slidedown to it's full height 351px. I can manage to do the above separately but not combined!! Would appreciate a little guidance please, thanks. This is my current code;

$.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开发者_如何学Go 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();

};

---

made a little progress!! I've got it running on a temp server:

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

But I can't get the boxes to return to the LHS also see how the text is visible, as the text is in the html and not an image in the div, does that mean I can't hide the text? Thanks in advance

(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();

};

---

Have you tried chaining the two effects together? Break them up into two animate() functions and then chain them in the order you want:

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

Each animate() function runs in sequence, so you can do any number of effects one after the other.

---

If you want one animation to fire after another finishes, use the .animate's callback:

pseudo-ish code:

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