Question

I am developing a site that has a pop out calculator. On clicking the button ‘Quote Calculator’ a div animates, first height then width and sits on top of all other elements on the page. This works in IE9, Chrome, FireFox & Safari, unfortunately it refuses to work in IE7/IE8.

When ‘Quote Calculator’ is clicked it only animates the height and then stops – leaving a thick blue line over the page, it does not animate the width.

I have searched for a similar problem here, and on Google, to no avail.. What is the problem?

Here is my code:

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

Is there a way to make it work on IE7/IE8 or will I have to settle for something less aestetically pleasing, like a disappearing/reappearing box?

UPDATE:

I have implemented the animations all on one line/as part of same function.

Interestingly, for some reason, whilst it won’t allow me to implement 2 animations in the same function on first click, it does allow me to do so on the minimize function like so:

$("#minimizebutton").click(function () {
    $("#pnecontainer").animate({width: "-925px"});
    $("#pnecontainer").animate({height: "-550px", top: "-635px"});
    $("#pnecontainer").hide(100);
});

Odd.. thoughts anyone? (comments only please, answer has been accepted)

Answer 1

You want to be using callback functions, waiting to animate the width until the other animation finishes, or maybe just put all the animations in the same .animate()

IE7/8 aren’t great with JS let alone animations, so the 2 animations on the same item running at the same time are probably what’s causing the issue.

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"}
    , function () {
         $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

Or animate it all in 1 line

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px", 
                            width: "925px", left: "-635px"});