jQuery-animate万能动画效果

问题:效果受局限

解决:万能动画函数:animate()

animation()可对数值类型的CSS样式执行定时器动画

包括:宽高，位置，透明度，边框宽度，字体大小

强调:不能对非数值类型属性做动画

包括:(颜色，背景图片，字体，display)

如何使用:

$(...).animate(params,speed-速度,easing-效果,fn)

其中：params:{css属性1:值1，css属性2:值2，....}

      speed：{动画持续时间/速度}

      easing：{速度的变化效果}

      fn：动画结束后，自动调用的回调函数

动画中的排队和并发

排队:多个动画顺序，先后执行

并发:多个动画同时执行

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #d1{border:1px solid #aaa;

            border-radius: 6px;

            background:#eee;

            word-break: break-all;

            width: 200px;

            height: 200px;

            position:absolute;

            }

    </style>

</head>

<body>

<h1>jQuery动画函数---透明函数</h1>

<button id="btn1">开始动画</button>

<br/><br/><br/><br/>

<div id="d1">

  jksahdkjhjashdjaskdhjksahdkjh

</div>

<script src="javascript/jquery-1.11.3.js"></script>

<script>

    $("#btn1").click(function(){

    $("#d1").animate({left:"300px"},2000)

            .animate({top:"300px"},2000)

    })

</script>

</body>

</html>
秒客网

jQuery-animate万能动画效果

相关文章
