jquery animate()动画 函数 学习

<div id="box" style="background: #98bf21;height:100px;width:100px;margin:6px;">
测试文字
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
<script>

    $(function(){
        $(".btn1").click(function(){
            $("#box").animate({
                //字体变为三倍
                fontSize:'3em',
                opacity:'0.5',
//                你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动
                margin:"+=50px",
                height:"+=300px"

            }, 5000, "swing", function(){
                alert("先执行完效果,在执行回调函数1");
            });
        });

        $(".btn2").click(function(){
            $("#box").animate({
                fontSize:'1em',
                opacity:'1',
                margin:"6px",
                height:"100px"
            }, 5000, "swing", function(){
                alert("先执行完效果,在执行回调函数");
            });
        });
    });


</script>

在网上找的api ,个人觉得是要注意其可以执行效果的参数

styles必需。规定产生动画效果的一个或多个 CSS 属性/值。

注意: 当与 animate() 方法一起使用时,该属性名称必须是驼峰写法: 您必须使用 paddingLeft 代替 padding-left,marginRight 代替 margin-right,依此类推。

可以应用动画的属性:

提示:颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色,您需要从 jQuery.com 下载 颜色动画插件
speed可选。规定动画的速度。

可能的值:

  • 毫秒
  • "slow"
  • "fast"
easing可选。规定在动画的不同点中元素的速度。默认值是 "swing"。

可能的值:

  • "swing" - 在开头/结尾移动慢,在中间移动快
  • "linear" - 匀速移动
提示:扩展插件中提供更多可用的 easing 函数。
callback可选。animate 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。


Alternate 语法

(selector).animate({styles},{options})

styles必需。规定产生动画效果的一个或多个 CSS 属性/值(同上)。
options可选。规定动画的额外选项。

可能的值:

  • speed - 设置动画的速度
  • easing - 规定要使用的 easing 函数
  • callback - 规定动画完成之后要执行的函数
  • step - 规定动画的每一步完成之后要执行的函数
  • queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。
  • specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

相关推荐