jquery调用animate()方法制作动画效果

来源 : 作者 : admin时间 : 2015-01-28 15:31:45 人气指数 :

导语 jquery调用animate()方法制作动画效果调用animate()方法可以创建自定义动画效果，它的调用格式为：$(selector) animate({params},speed,[callback])其中，params参数为制作动画效果的CSS属性名与值，speed参数为

jquery调用animate()方法制作动画效果

调用animate()方法可以创建自定义动画效果，它的调用格式为：

$(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

CSS样式

span

{

    position:absolute;

    width:80px;

    height:80px;

    border: solid 1px #ccc;

    margin: 0px 8px;

    background-color: Red;

    color:White;

    vertical-align:middle

}

<body>

     <h3>制作移动位置的动画</h3>

     <span></span>

     <div id="tip"></div>



     <script type="text/javascript">

         $(function () {

             $("span").animate({

                 left: "+=100px"

             }, 3000, function () {

                 $(this).animate({

                     height: '+=30px',

                     width: '+=30px'

                 }, 3000, function () {

                     $("#tip").html("执行完成!");

                 });

             });

         });

     </script>

</body>

tml>

浏览效果立即下载

TAG:jquery animate()

本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：爱思资源网 http://www.aseoe.com/show-13-488-1.html

jquery调用animate()方法制作动画效果

[前端插件推荐] Plugin