Window resize help needed. Change div position (instead of animation)

Question

I'm not sure what's the right solution here. I've used the search function and Google, but I still need some advice.

I got several divs animating in, on window.load. For example:

var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');

So this animates the div to the center of the screen. Now when I resize the window it doesn't center dynamically.

I wrote another few lines, like this:

$(window).resize(function() {
var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');
});

I got it to work with animation, but I just want to move the divs to their new location without animation. But maybe it's better to use a different solution?

Could someone please give me some advice?

Thank you!

EDIT: Case closed i guess, thanks everyone! http://jsfiddle.net/jruddell/bV8qp/2/

Answer 1

use .center {position: relative; margin-left: auto; margin-right: auto; } .center {position: relative; margin-left: auto; margin-right: auto; }

Answer 2

UPDATED:

It turns out my initial idea doesn't quite work, and the correct answer is to use a combination of absolute and relative positioning. You seem to have figured this out, but I'm correcting my answer for the benefit of others.

Since the "auto" value for margins can't be animated, you still need to use absolute positioning to animate the div to the center on page load, like you did in your original code. Once the div reaches the center of the page, however, you can change its style to relative positioning with auto margins to make it stay centered when the window resizes.

Rather than set the CSS on the element directly, I recommend switching it between two different classes, one for the "animating" state and one for the "centered" state. That way you can add additional styling to your element without needing to change the animation code. However, in order to do this, you'll need to make sure to undo the animation's direct CSS modification once it is finished, otherwise the absolute positioning properties set directly on the element will override the relative positioning ones set by the stylesheet.

So in your page's CSS, you can define two classes like this:

.fly-in {
    position:absolute;
    left:0px;
}
.center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

Then in your window.load function, or wherever you want to do the animation, you can have code like this:

var showreel = $('#plbg');
showreel.addClass("fly-in");
showreel.delay(1500).animate({
    left: ($(window).width() - showreel.width()) / 2 + "px" 
}, 500, 'swing', function() {
    showreel.removeClass("fly-in").addClass("center");
    //Clear the "left" property that animate set directly on the div
    showreel.css('left',''); 
});

This sets the div to use absolute positioning before running the animation, then runs the animation with a callback function (the last argument to animate ) that sets it to relative positioning when the animation is complete.