jquery .animation help

hi all,

i have a link on my page, which when clicked i want to load the new htm and slide it into the container whilst at the same time sliding the old html table out.

i have the following code to do this, and it is working, however the transition isn't quite as smooth as i would like, as it gets to the end of the animation even when the div is set to 0px it seems to cuase some displacment of the footer div below it.

any ideas on how i can get around this?
var animation = 1500;
function prevDay() {
    var panel = document.getElementById('panel');
    document.getElementById('day').id = 'old_day';
    current_date.setDate(current_date.getDate() -1);
    var html = dayView(current_date);
    var old_html = panel.innerHTML;
    panel.innerHTML = "";
    panel.innerHTML = html;
    document.getElementById('day').className = 'hiddenDay';
    panel.innerHTML += old_html;
    $('#old_day').animate({ height: "0px", padding: "0px" }, animation);
    $('#day').animate({ height: "320px" }, animation);
    setTimeout("panel.removeChild(document.getElementById('old_day'))", animation);

Open in new window

Who is Participating?
Pawel WitkowskiSenior Javascript DeveloperCommented:
first of all make sure that you stop previous animation, so it will be more like:

$('#old_day').stop().animate({ height: "0px", padding: "0px" }, animation);
$('#day').stop().animate({ height: "320px" }, animation);

I see a problem with your code. In your function (which is quite out of context, the whole html would help) prevDay - you're setting the "old_day" ID to the element with the "day" ID. But you're not setting the "day" ID to anything. So later in your code, there's nothing like $('#day') ... I may be wrong, the whole html would really help ..
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.