CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
LogixMaster
LogixMaster

Reputation: 586

Jquery animate Slide left(extend) and slide down

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'
  });

});

Upvotes: 0

Views: 698

Answers (2)

noel
noel

Reputation: 2145

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/

Upvotes: 1

Oscar Paz
Oscar Paz

Reputation: 18292

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.

Upvotes: 1

Related Questions