Question

With jQuery available, how would I go about the following:

I have a div on a page, with content inside. There is no set height to this div however, it reguarly changes height depending on what the user is searching (content appears/disappears based on whats being typed).

This all works, however the footer doesn’t look too good as it jumps to the position as soon as the div changes height.

Is there anyway way I could make it so the footer slides to the position of where it is going too? Rather than jump to it?

I would supply code, but I have no idea how to do this sorry!

My guess: Grab the current height of the div, and when it changes, calculate the difference and move it up?

Answer 1

If css3 is acceptable and I understood what you’re asking correctly you can just add a transition property such as

#content {
    transition: height 2s;
    -webkit-transition: height 2s;
    -moz-transition: height 2s;
    -o-transition: height 2s;
    -khtml-transition: height 2s;
    -ms-transition: height 2s;
}

If not you can use jquery as in this fiddle http://jsfiddle.net/YLKf9/1/