jQuery - animate() 方法

作者: 梵高先生uu | 来源:发表于2018-08-27 22:16 被阅读0次

.animate语法结构

animate(params,speed,callback)
params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}

speed:速度参数[可选]

callback：在动画完成时执行的函数[可选]

自定义简单动画

用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。

<style>
    #cube{
        position:relative;/* 不加这句元素不能动 */
        width:30px;
        height:30px;
        background:red;
        cursor:pointer;
    }
</style>
<body>
    <div>
        <div id="cube"></div>
    </div>
    <script>
        $(function(){
            $("#cube").click(function(){
                $(this).animate({left:"100px"},2000)
            })
        })
    </script>

为了使元素动起来，要改变left属性。为了能影响元素top、right、bottom、left属性值必须声明元素的position。