jquery .animation help

Posted on 2009-04-29
Last Modified: 2012-05-06
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

Question by:flynny
    LVL 18

    Accepted Solution

    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);

    LVL 5

    Expert Comment

    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

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now