CODEWITHSUNDEEP
jquerycssjquery-animatetoggle
angela
angela

Reputation: 1143

How do I Toggle a divs height to make it appear as if it is sliding down?

Please see this fiddle I have started. http://jsfiddle.net/rabelais/6bt70uhj/1/

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({height: 'toggle'});
});

When you click the link the first sentence slides in from the left and the second line comes in from the first line. This is very close to what I am trying to achieve, however I need the second line to appear more like it is sliding as a whole object rather than looking like it is being revealed.

I have already tried using .SlideDown but this gave the same effect as .animate.

Any ideas? Thanks

Upvotes: 0

Views: 74

Answers (3)

Papibarozza
Papibarozza

Reputation: 31

If you want the entire line to slide as an object, its not the height you want to toggle, but rather the position relative to the element it should slide from. Your code would work if you'd just offset the element properly and then use: 

 $('#bio-line-2').animate({marginTop: 'toggle'});

as Dipesh mentioned.

If you want to make sure the animation doesn't start before the first line has flown in from the left, you can pass in a function to execute after the first animation is finished, like so:

$('#bio-line-1').animate({width: 'toggle'},function(){ 

  $('#bio-line-2').animate({marginTop: 'toggle'});

});

This ensures the second animation waits for the first one to finish.

Upvotes: 0

Sid
Sid

Reputation: 170

Could try this, If I understood your question properly

$('#name-a').click(function() {
    $('#bio-line-1').animate({width: 'toggle'});
    window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300);
  });

Upvotes: 1

Dipesh Rana
Dipesh Rana

Reputation: 367

Use this code:-

css:

#bio-line-2 {
left: 120px;
position: fixed;
top: 20px;
width: 433px;
z-index: 1;
margin-top:20px;

}

Jquery

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({marginTop: 'toggle'});
});

Upvotes: 0

Related Questions