Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

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

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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now