Javascript 动画 CSS float 属性

Question

我有一个通过 JavaScript 添加的类，它使一个部分正确 float ，对于这个部分类，我想将 float 动画设置到它的位置，但是我还没有找到使它工作的方法。有没有办法使用 css3 来制作 float 动画？

Answer 1

由于上述原因，不可能单独使用 CSS。但请查看 Darcy Clark 在这篇文章中的回答:

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

他链接到这个 fiddle ，似乎已经弄明白了:

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); 
    });

})();

我不知道这样做是否真的是个好主意。