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属性值：

JavaScript
// 元素会执行平滑淡入的效果
// 当动画结束时 元素的 display 属性会被设置成 "table"
$element.velocity("fadeIn", { display: "table" });
开始

1-2. "slideUp" & "slideDown"

Slide 对应为:"slideUp"(收起) 和"slideDown"(展开)两个动画指令， 和 jQuery 的$.slideUp(),$.slideDown()方法相似，通过动态调整元素的height属性，让元素 "收起" 或 "下拉"，看下面这个示例：

JavaScript
// 元素会先"收起"隐藏，延迟500毫秒后 再"下拉"显示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });
开始

2. Scroll 滚动

2-1. 滚动浏览器内容到目标元素的位置

"scroll"动画指令，比如常用的回顶动画 就可以使用这个指令：

JavaScript
/* 回顶动画，滚动浏览器内容到 <body> 的顶部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });
回顶

2-2. 滚动元素内容到目标位置

当一个元素的内容部分溢出产生滚动条，可以使用"scroll"将内容滚动到指定的位置,container选项对应为该元素的选择器，看下面例子：

JavaScript
/* 让 $("#container") 元素的内容滚动到内部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });
First element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Second element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Third element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Fourth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Fifth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Sixth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
开始

2-3. 设置滚动相对偏移量

可以设置相对偏移量，单位默认为px：

JavaScript
$element
    /* 滚动到相对 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滚动到相对 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

另外，当滚动整个浏览器窗口时 如果目标元素为<html>， 可以关闭硬件加速 设置mobileHA: false来避免 iOS 中可能出现的页面闪动问题。

JavaScript
/* 滚动整个页面到一个任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

3. Stop 停止当前动画

"stop"指令，可以使当前正在执行的动画立即停止，类似 jQuery 的$.stop()方法

JavaScript
$element.velocity("stop"); // 停止正在执行的 $element 元素的动画
JavaScript
$element.velocity("stop", "myQueue"); // 停止某自定义队列
JavaScript
$element.velocity({ left: 100 });

// 点击 $("#button")，立即停止当前正在执行的 left 动画
// 并立即反向执行 left 动画 (right 方向运动)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

设置stop: true, 可以停止并清空当前正在执行的整个动画队列

JavaScript
$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在执行 width 动画，点击 $("#button") 将立即停止当前动画
// 并移除和跳过将要执行的 height 动画队列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

4. Finish 停止并跳转到动画结束时的状态

"finish"指令会停止当前正在执行的动画，并直接跳转到动画结束的状态（无过渡）。

JavaScript
$element.velocity("finish");

5. Reverse 使动画反向执行

"reverse"指令使动画反向执行，就像让一部电影倒着播放。 Reverse 默认会继承之前动画的配置选项（比如duration,easing等）， 但也可以重新设置：

JavaScript
$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });
开始

导航

问题反馈：mrfront@163.com