Question

Since regular jQuery animations are not fluent on iOS (.hide(), slideDown()), I’m attempting to turn my shorthand .fade() and .slideDown() functions into the longhand .animate() functions, so I can then use jQuery.Animate plugin to convert these animations to CSS3, while mainiting a jQuery fallback.

I think fading a div using this method should be easy, but attempting to have a div slide down from the center is giving me a headache.

The normal CSS for the div is…

.zip{
    width:130px;
    height:70px;
    left:50%;
    top:50%;
    margin-top:-46px;
    margin-left:-76px;
    position: absolute;
    text-align: center;
    z-index: 2;
    background:rgba(0,155,23,.8) url(overlay.png);
    border-radius: 10px;
    padding:10px;
    border:1px solid #fff;
    box-shadow:0 0 40px #000;
} 

And then I was using the following to delay, then have the div slide down…

$(".zip").delay(1000).slideDown(200);

This works fine, obviously, but it won’t be picked up by the plugin.

So, how could I turn that into a function using .animate()?

My attempt:

CSS…

.zip{
    display:none;
    height:0;
    padding:0;
    /* Plus everything else */
} 

jQuery…

$('.zip').delay(1000).animate({
    display: "block",
    height: "70px",
    padding: "10px",
});

Except this is sliding down from the lefthand corner, not the middle.

Also, maybe I’m doing this completely wrong, and there’s a much better way to use the CSS3 accelerated transitions on iOS devices while still providing a jQuery fallback, in which case, please share!

Answer 1

Animate the width and margin-left as well. Alternatively, you could animate only the width and set the margin to auto (which means centered horizontally)