zoukankan      html  css  js  c++  java
  • 自定义动画——animate()

    在JQuery中,通过使用animate()方法,可以允许用户自定义动画,制作出效果更优雅、动作更复杂的页面动画效果。

    animate()方法给开发者自定义各种复杂、高级的动画提供了极大的方便和空间,其调用语法为:

      animate(params,[duration],[easing],[callback])

      参数params表示用于制作动画效果的属性样式和值的集合。

      可选项[duration]表示三种默认的速度字符“slow”、“normal”、“fast”或自定的数字。

      可选参数[easing]为动画插件使用,用于控制动画的表现效果,通常有“linear”和“swing”字符值。

      可选参数[callback]为动画完成后,执行的回调函数。

    PS:在动画方法animate()中,第一个参数params在表示动画属性时,需要采用“骆驼”写法,即如果是“font-size”,必须写成“fontSize”才有效,否则报错。

    (1)功能描述

      在页面中,单机某块<div>元素,其自身的高度和宽度以动画的效果增大。动画完成后,元素的边框加粗,并且边框颜色及<div>元素内容发生变化。

    (2)实现代码

    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        .box{border: solid 1px #ccc;background-color: #eee;width: 100px;height: 100px;font-size: 13px;padding: 5px;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <script>
        $(function(){
            $(".box").click(function(){
                $(this).animate({    //宽与高变化的动画效果
                    "20%",
                    height:"200px"
                },
                3000,function(){
                    $(this).css({"border":"solid 4px orange"})
                    .html("变大了!");
                });
            });
        })
    </script>
    </head>
    <body>
        <div class="box">
            点击变大
        </div>
    </body>
    </html>

    结果如下图所示:

    通过animate()方法,不仅可以用运动效果增加元素的长和宽,还能以动画效果移动页面种的元素,即改变其相对位置。

     例如:

    $("div").animate({
      left:"20px",
      top:"60px"
    },3000) 
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    《1024伐木累》-te别篇,庭审你知道吗?
    《1024伐木累》-人生最高境界,长的好看
    《1024伐木累》-买车,见梦中之人
    《1024伐木累》-小白篇之谈判-总章节七
    《1024伐木累》-新年到了,祝大家新年快乐!
    《1024伐木累》-年会了,剪刀石头布决胜
    《1024伐木累》-小白篇之丽jie(结束篇)-总章节六
    《1024伐木累》-老板,我又说实话了
    《1024伐木累》-BUG的通用解决办法
    [复习资料][随想]如何枚举一个排列
  • 原文地址:https://www.cnblogs.com/baixc/p/3405706.html
Copyright © 2011-2022 走看看