Css3 Webkit css动画:调整div矩形的大小

Question

我试图了解是否可以animate使用webkit动画在Jquery中复制该方法

假设我有一个使用jquery的div 50px乘50 px,我可以使用以下命令轻松调整大小并为其设置动画:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box

我想知道如何使用CSS WebKit动画如何做同样的事情

PS.我不需要它们在firefox中工作,只是Safari/Chrome的一个项目

Answer 1

你可以使用这个CSS:

div.mybox {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

然后你可以使用jQuery更新width和height属性:

$(document).ready(function() {
    $("div.mybox").css({"width": "100px", "height": "70px"});
});

因此,如果浏览器支持它,这将是动画.但是,当然,请考虑将这些属性放到单独的类中,并将此类添加到元素中.您可以像这样使用.addClass()函数.

$(document).ready(function() {
    $("div.mybox").addClass("enlarged");
});

或者,例如,您可以将它与toggleClass函数和click事件一起使用(单击时该框将被放大,再次单击时将更改为正常大小).

$(document).ready(function() {
    $("div.mybox").click(function() {
        $(this).toggleClass("enlarged");
    });
});

在这种情况下,属性应该在CSS类中定义.

div.mybox.enlarged {
    width: 100px;
    height: 70px;
}

此外,如果你想在鼠标悬停时发生动画,那么你需要添加的是:

div.mybox:hover {
    width: 100px;
    height: 70px;
}

可以在不使用JS的情况下执行这种动画.

此外,您应该阅读CSS3转换属性和转换函数(它们在许多情况下都可以使用).它们在这里描述.

Answer 2

CSS3将使您非常轻松！它将添加一个过渡，您可以使用更改尺寸:hover。这是示例div：

<div id="mydiv">
    <!-- Div content goes here -->
</div>

因此，您的div是“ mydiv”。其余的工作在CSS3中完成：

#mydiv {
    width: 50px;
    height: 50px;
    background: #f34543;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
#mydiv:hover {
    width: 100px;
    height: 70px;
}

JSFiddle：http : //jsfiddle.net/dakoder/ZGHLM/

而已！它将尺寸从50x50px调整为100x70px。已在Chrome（而非Safari）上进行了测试。