Using JQuery to animate size of div

Question

I am an amateur in Jquery but am so close to getting what I am looking for. I am trying to have a containing div animate to a larger height when an object is clicked. I am using the following code:

<div id="sliderone">
 <div id="nav">
  <div id="navone" style="text-align: center;">This is a clickable title</div>
 </div>

 <div id="ourteam">
  <div id="title"></div>
 </div>
</div>

<script type="text/javascript">
   $('#navone').click(function(){
   $('#title').html("<img src='http://placehold.it/350x550' alt='' />");
        $('.post-8 .content-container').animate({height: '950'});
   });  
</script>

#navone {
   padding:20px 20px;
   cursor:pointer; 
}

#title {
   width:350px;
   margin:0 auto;
}

#sliderone {
   height:50px;
   background-color:#777777;
   position: absolute;
   margin-top: -500px;
   left: 50%;
   margin-left: -175px;
}

#sliderone has to be absolutely positioned and so when I try to animate .post-8 .content-container it makes the top longer in comparison instead of making the bottom longer to contain the new content. Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container ?

Thank you for any help. I have worked hard on this and just can't quite figure out this last problem.

Here is the actual page to see.

http://s416809079.onlinehome.us/wp-login login:stackoverflow password:stackoverflow

Answer 1

You might want to try using some of jQuery's slideDown , slideUp or slideToggle methods. Since you are specifically looking to slide the container I imagine this might be more specific to your needs.

See this example based on what you have above: http://jsfiddle.net/82kHV/13/

Also links to jQuery methods: http://api.jquery.com/category/effects/sliding/

You will set the element's height you want in your CSS . jQuery will interpolate and animated from 0 to this defined value in slideDown and the reverse in slideUp . slideToggle will take initial state of the element and do the opposite or toggle.

Answer 2

I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . If that is the case you need to animate too the height for #sliderone :

$('#sliderone').animate({height: '225px'});/*The value you calculate*/

Check this demo http://jsfiddle.net/z7M2Y/26/