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,依此类推。 可以应用动画的属性:
|
speed | 可选。规定动画的速度。 可能的值:
|
easing | 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。 可能的值:
|
callback | 可选。animate 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 |
Alternate 语法
(selector).animate({styles},{options})
styles | 必需。规定产生动画效果的一个或多个 CSS 属性/值(同上)。 |
options | 可选。规定动画的额外选项。 可能的值:
|
相关推荐
89463661 2019-12-04
suis 2019-11-16
LingPF 2019-11-08
钱多多 2013-05-29
王福朋 2018-02-28
CandyGoo 2014-08-19
84483065 2019-03-25
limengmeng00 2018-08-22
CrazyDogWang 2017-02-14
liusure0 2015-06-11
zyhui 2015-06-10
富贵 2015-01-16
zhangmingming 2013-05-29
XiaoSpring 2011-01-24
Haoroid 2018-01-16
natineprince 2017-03-15
87244857 2019-05-08
natineprince 2016-07-13
TommyOnee 2017-03-08