jQuery为浮动div设置动画

Question

I'm trying to create a fade-in animation for a div. The idea is to move div from right to left and fade-in. Because of the layout, the div is floated right above a certain window width (ie 501px) and left below (500px).

HTML

<div id="container">
    <div id="animated"></div>
</div>

CSS

@media only screen and (min-width:501px)
{
    #animated {
        float:right;
    }
}

@media only screen and (max-width:500px) 
{
    #animated {
        float:left;
    }
}

When div is floated right everything works fine, but when floating property is set to left the movement stops working. How can I change my script to achieve the movement with a unique code, independently from floating property and CSS breaking points? Thanks in advance.

Fiddle

Answer 1

You can use jQuery to get the browser window width and then do a conditional check on that for your animation.

Javascript:

// Returns float of animated window based on CSS values
var float = $('#animated').css('float');

if (float == 'right') {
    $('#animated').css("margin-right", '10%').animate({
        "margin-right": "-=10%",
        opacity: 1
    }, 2000, 'swing');
} else {
    $('#animated').css("margin-left", '10%').animate({
        "margin-left": "-=10%",
        opacity: 1
    }, 2000, 'swing');
}

DEMO http://jsfiddle.net/3L93z/3/