Javascript动画CSS浮动属性 [英] Javascript animate CSS float property

问题描述

我有一个通过JavaScript添加一个类，使一个部分浮动权利，对于这个类我想动画浮动到它的位置，但我还没有发现反正使这项工作。有没有办法使用CSS3动画浮动？

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?

推荐答案

这是不可能使用CSS的上述原因。但请查看Darcy Clark对此帖子的回答：

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-a-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.

这篇关于Javascript动画CSS浮动属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！