Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using jQuery animate to have a div slide down from center?

Using jQuery animate to have a div slide down from center?

Problem

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!

Problem courtesy of: Charlie

Solution

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)

Solution courtesy of: Jan Dvorak

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using jQuery animate to have a div slide down from center?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×