delay before animate() begins

delay before animate() begins

Hello,

I'm trying to animate the height of a div using jquery animate(). Please have a look at these before and after images:

BEFORE:


AFTER:

What's happening here is that the user comes to a blank page with only the name textbox and the vehicle drop down list. When the user selects a vehicle from the list, the div becomes visible and animates height-wise (i.e. it expands).

This is all well and good.

Here is my CSS:

[code]
.VehicleFeatures
{
    display: none;
    flex-wrap: wrap;
    padding: 10px;
    margin: 15px 0;
    border: 3px #00447c solid;
    border-radius: 7px;
    width: 600px;
    overflow: hidden;
    max-height: 0px;
}
[/code]

and my Javascript:

[code]
                    $("#VehicleFeaturesDiv").css("display", "flex");
                    $("#VehicleFeaturesDiv").animate({
                        maxHeight: 10000,
                    }, 2000, function () { });
[/code]

Now the problem is when the user goes from selecting a car to selecting "Please select a vehicle...". What should happen is the div should animate in the opposite direction (i.e. it should collapse) and then disappear.

Here is my Javascript for doing that:

[code]
        $("#VehicleFeaturesDiv").animate({
            maxHeight: 0
        }, 2000, function () {
            $("#VehicleFeaturesDiv").css("display", "none");
            $("#VehicleFeaturesDiv").html("");
        });
[/code]

The problem is that there is a delay of about 2 to 3 seconds before this animation starts. So the user selects "Please select a vehicle..." and nothing happens for about 2 to 3 seconds... and [i]then[/i] the div collapses.

Is there any reason there should be a delay before the animate() function runs? Any way to get it to run immediately?

Thanks