高级用法

发布于 2019-05-17 字数1978 浏览 732 评论 0

函数

属性值可通过传递一个函数来设置动画效果

// 使 $element 的透明度随机到一个值 的动画,每次执行后 元素透明度都不同
$element.velocity({
    opacity: function() { return Math.random() }
});
<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({opacity: function() {return Math.random()}});
})
</script>

初始值

通常,在动画执行前,动画引擎会先查询 DOM 以确定元素的初始值, Velocity 可以让用户自定义元素初始值,这样可以避免 DOM 查询

$element.velocity({
    /* translateX 初始值永远为0 动画结束值为500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永远为0 动画结束值为1 缓动效果为"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});
$element
    /* 对于这个链式动画,在每次动画开始前 元素的 translateX 初始值还是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });

下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({ left: [ 500, 100 ] }).velocity("reverse");
  })
</script>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!