Jquery animate Slide left(extend) and slide down

Question

I am not very familiar with jquery's animate and I need to create an element which upon click of another element, the element should slide from left to right(currently hides behind another element).

Then shows its full content(like a drop down menu) after extending fully from left to right. I tried doing it using transition effects but its is not that powerful(in terms of flexibilty/control)

Anyone knows a good way to do this? Thanks

[EDIT] hers a jsfiddle of what I am doing so far

$('#menu-btn').click(function(event) {

  $('#whole').animate({
      left: '100px'
  },500,
      function(){
      left: '-100px'
  });

});

Answer 1

I think you need something like:

$('#menu-btn').click(function(event) {
  $('#whole').animate({
      left: '100px'
  },500,
  function(){
    $('#data').slideDown();
  });
});

Slide down the whole instead if that is what you were thinking.

I updated the fiddle. You had .#whole instead of #whole which prevented that style.

EDIT:

See my forked fiddle for a nicer solution: http://jsfiddle.net/6ETK8/6/

Or using css transitions: http://jsfiddle.net/6ETK8/7/

Answer 2

I think you want to do two animations:

1. animate the element from left to right (slide to right)
2. animate the contents of the element, or a element inside the first element, from top to bottom (slide down).
3. animations should run one after the other, not in parallel.

Learn about .animate(). Then you can achieve this by starting the first animation (slide to right), and, in its complete handler, start the second animation (slide down).

By the way, it is possible, an relatively easy, to do this with transitions.