asked on

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

ASKER CERTIFIED SOLUTION

Pawel Witkowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

prokvk

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 ..