Question

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

假设我的div为50px乘50 px 使用jquery我可以使用：

轻松调整大小并为其设置动画

$('#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更新宽度和高度属性：

$(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 transition attribute和转换函数的信息（它们在许多情况下都可以使用）。它们被描述为here。

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中测试。

Answer 3

@keyframes animationName {
    0% {width: 50px; height:50px}
    100% {width: 100px; height:70px}
}

看看这个： http://www.css3files.com/animation/

Answer 4

您可以将CSS动画和过渡与“动态”值结合使用，方法是将CSS应用为新的样式表或内联样式，如下所示：

http://jsfiddle.net/4zD74/

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

4 个答案: