jquery-Animate

浏览数：26 / 时间：2015年06月09日

Animate动态改变div高度，且具有动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="javascript/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("#box").animate({ height: "300px" });
            });
            $(".btn2").click(function () {
                $("#box").animate({ height: "100px" });
            });
        });
    </script>
</head>
<body>
    <div id="box" style="background: #ff0000; height: 100px; width: 100px; margin: 6px">
    </div>
    <button class="btn1">
        Animate</button>
    <button class="btn2">
        Reset</button>
</body>
</html>

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 text htm html ff js doc css 用法 样式 XML 代码 text htm html ff js doc css 用法 样式 XML

相关文章

随机文章

您可能还喜欢

您可能还喜欢