html - Javascript animate CSS float property

Question

I have a class added via JavaScript which makes a section float right and for this section class I want to animate the floating into it's position, however I have not found anyway to make this work. Is there a way to use css3 to animate floating?

Answer 1

It isn't possible using CSS alone for the reason's stated above. But check out Darcy Clark's answer on this post:

http://www.quora.com/Is-there-a-way-in-jquery-to-animate-an-element-from-a-float-right-position-to-a-float-left-position

He links to this fiddle and seems to have figured it out:

http://jsfiddle.net/darcyclarke/m9pTN/

HTML

<div class="float right"></div>
<div class="float left"></div>

CSS

.float {
    background: red;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    display: block;
    float: left; 
    clear: both;
}

.left {
    background: blue;
    float: right;  
}

JS

(function(){
    var $plugin = jQuery.sub();
    $plugin.fn.animate = function(props, speed, cb){
        if(typeof(speed) == "function")
            cb = speed, speed = 500;
        if(typeof(cb) != "function")
            cb = function(){};
        return $.each(this, function(i, el){
            el = $(el);
            if(props.float && props.float != el.css("float")){
                var elem = el.clone().css(props).insertBefore(el),
                    temp = (props.float == el.css("float")) ? elem.position().left : el.position().left;
                props.marginLeft = elem.position().left;
                elem.remove();
                el.css({float:"left",marginLeft:temp});
            }
            $(this).animate(props, speed, function(){
                $(this).css(props);
                cb();
            });
        });
    };

    $(".float.right").bind("click", function(){
        $plugin(this).animate({float:"right"}, 1000); 
    });

    $(".float.left").bind("click", function(){
        $plugin(this).animate({float:"left"}, 1000); 
    });

})();

I can't speak to whether or not doing this is actually a good idea.