Command 指令
Velocity 中预定义了几个常用的快捷动画指令。
1. Fade & Slide
1-1. "fadeIn" & "fadeOut"
Fade 对应为:"fadeIn"(淡入) 和"fadeOut"(淡出) 两个动画指令， 和 jQuery 的$.fadeIn(),$.fadeOut()相似。
Fade 和 Slide 动画指令 都会动态设置元素的 cssdisplay属性显示或隐藏。 默认情况下，当元素被显示，如果是块级元素 比如<div>，就会被设置成display: block，如果是行级元素 比如<span>就会被设为display: inline， Velocity 会根据元素的标签类型 设置最适合的值。
但如果你在配置项中设置了display选项为某值时， 动画结束时该值会覆盖 Fade 和 Slide 所设置的display属性值：
// 元素会执行平滑淡入的效果
// 当动画结束时 元素的 display 属性会被设置成 "table"
$element.velocity("fadeIn", { display: "table" });1-2. "slideUp" & "slideDown"
Slide 对应为:"slideUp"(收起) 和"slideDown"(展开)两个动画指令， 和 jQuery 的$.slideUp(),$.slideDown()方法相似，通过动态调整元素的height属性，让元素 "收起" 或 "下拉"，看下面这个示例：
// 元素会先"收起"隐藏，延迟500毫秒后 再"下拉"显示
$element
.velocity("slideUp", { duration: 1500 })
.velocity("slideDown", { delay: 500, duration: 1500 });2. Scroll 滚动
2-1. 滚动浏览器内容到目标元素的位置
"scroll"动画指令，比如常用的回顶动画 就可以使用这个指令：
/* 回顶动画，滚动浏览器内容到 <body> 的顶部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });2-2. 滚动元素内容到目标位置
当一个元素的内容部分溢出产生滚动条，可以使用"scroll"将内容滚动到指定的位置,container选项对应为该元素的选择器，看下面例子：
/* 让 $("#container") 元素的内容滚动到内部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });2-3. 设置滚动相对偏移量
可以设置相对偏移量，单位默认为px：
$element
/* 滚动到相对 $element 向下偏移250px的地方 */
.velocity("scroll", { duration: 750, offset: 250 })
/* 再滚动到相对 $element 向上偏移50px的地方 */
.velocity("scroll", { duration: 750, offset: -50 });另外，当滚动整个浏览器窗口时 如果目标元素为<html>， 可以关闭硬件加速 设置mobileHA: false来避免 iOS 中可能出现的页面闪动问题。
/* 滚动整个页面到一个任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });3. Stop 停止当前动画
"stop"指令，可以使当前正在执行的动画立即停止，类似 jQuery 的$.stop()方法
$element.velocity("stop"); // 停止正在执行的 $element 元素的动画$element.velocity("stop", "myQueue"); // 停止某自定义队列$element.velocity({ left: 100 });
// 点击 $("#button")，立即停止当前正在执行的 left 动画
// 并立即反向执行 left 动画 (right 方向运动)
$("#button").on("click", function() {
$element.velocity("stop").velocity("reverse");
});设置stop: true, 可以停止并清空当前正在执行的整个动画队列
$element
.velocity({ width: 100 }, 1000)
.velocity({ height: 200 }, 1000);
// 如果元素正在执行 width 动画，点击 $("#button") 将立即停止当前动画
// 并移除和跳过将要执行的 height 动画队列
$("#button").on("click", function() {
$element.velocity("stop", true);
});4. Finish 停止并跳转到动画结束时的状态
"finish"指令会停止当前正在执行的动画，并直接跳转到动画结束的状态（无过渡）。
$element.velocity("finish");5. Reverse 使动画反向执行
"reverse"指令使动画反向执行，就像让一部电影倒着播放。 Reverse 默认会继承之前动画的配置选项（比如duration,easing等）， 但也可以重新设置：
$element
.velocity({ left: 200 }, { duration: 500 })
.velocity("reverse", { duration: 2000 });
扫一扫
4251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
