高级用法

函数

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

// 使 $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>