Geek asks and answers

JQuery: How to animate height changes without known heights?

I want to animate a change in height (when I hide / show a div) using jQuery. I found some examples on SO, but I can't get them to work.

Let's say I have a container with some divs in it.

HTML:

<div class="container">
  <div class="first">Show first div</div>
  <div class="second">Show second div</div>
  <div class="item1">
     Some text
  </div>
  <div class="item2">    
     Some multiline<br />text
  </div>
</div>

JQuery

$('.first').on('click',function(){
  $('.item2').hide();
  $('.item1').show();
});
$('.second').on('click',function(){
  $('.item1').hide();
  $('.item2').show();
});

http://jsfiddle.net/ytW69/2/

When I press div.first, I want to show div.item1, when I press div.second, I want to show div.item2. The height of these divs is different, which means that the size of the container changes when I hide / show divs.

How can I change this height change without knowing the size of any div?

ps. if there is a CSS solution, it will be even better. I don't think this is only possible with CSS tho.

+3
source share
4 answers

.show() .hide(), . milliseconds .

,

$('.first').on('click',function(){
    $('.item2').hide('slow');
    $('.item1').show('slow');
});
$('.second').on('click',function(){
    $('.item1').hide('slow');
    $('.item2').show('slow');
});

DEMO

+3

: -

$('.first').on('click',function(){
    $('.item2').hide('fast');
    $('.item1').show('fast');
});
$('.second').on('click',function(){
    $('.item1').hide('fast');
    $('.item2').show('fast');
});

, , .show() . .show() , .

0

( ), slideDown() slideUp():

$('.first').on('click', function () {
    $('.item1:hidden').slideDown('slow');
    $('.item2:visible').slideUp('slow');
});

$('.second').on('click', function () {
    $('.item2:hidden').slideDown('slow');
    $('.item1:visible').slideUp('slow');
});

JSFiddle .

0

CSS, , / . : css3 div

0
source

More articles:


All Articles