7

i want to have a little "preview" of the content in the div, so i made it so small that only only the first line is shown. now i want to animate it that when you click the title, the div will have the height of 100%, but when i use animate(height:"100%") there is no nice sliding.

<a href="javascript:void(0);" class="show_it">title:</a> <div> content<br> content_hidden </div> <script> $('.show_it').click(function() { $(this).next("div").animate({ height: 'auto' }, 1000, function() { }); }); </script> <style> div{ height:20px; overflow:hidden; } </style>
Improve this question
0

3 Answers 3

Reset to default
8

Although I am sure there is a better way of doing this as this method is sloppy AT BEST, if you don't find another solution you could always try this:

$('.show_it').click(function() { // Animate to 100% in 1 millisecond $(this).parent().next("div").animate({height: 'auto'}, 1); // Record the height of the div var newHeight = $(this).parent().next("div").height(); // Animate height to 0% in 1 millisecond $(this).parent().next("div").animate({height: '0px'}, 1); // Do the animation using the new fixed height. $(this).parent().next("div").animate({ height: newHeight, }, 1000, function() { }); });

However, as I said this is very sloppy - if it fits your needs, try jquery slideDown(); this is a much better way to do it.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Worked for me... i guess animate not working correctly with height: 100% ?
why doing a animation for 1 millisecond? Just do it directly, as justincohler described.
4

Or this:

$('.show_it').click(function(){ $(this).parent().next("div").css("height", "100%"); var h = $(this).parent().next("div").height(); $(this).parent().next("div").css("height", "0px"); $(this).parent().next("div").animate({height: h}, 1000, function() { }); });
Improve this answer

1 Comment

Yes, this is better than animating for 1ms and works for me. Thanks!
0

Try this

$('.show_it').click(function() { var $div = $(this).parent().next("div"); var h = $div.children().each(function(){ h = h+ $(this).height(); }); $div.animate({ height: h }, 1000, function() { }); });
Improve this answer

3 Comments

@James chill out, dude. meta.stackexchange.com/questions/23321/…
@MattBall, I'm perfectly calm. I'm not sure if you read the whole thread that you posted, but if you did, I'm sure you would see that there are a couple schools of thought on this: "Now, if someone wants to leave a comment to explain to a newbie that they need to accept some answers or people won't keep answering their questions, then that's good because it's teaching them the type of behavior that is expected from question-askers (since they obviously haven't noticed the mark of shame below their sig)." I explained very kindly to the OP why it was in their best interest to accept answers.
I've taken your hint to heart, and also my english isnt the very best, because its not my mother tongue

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.