velocity 测试 | JShare

$("#d").html('ccccccc');
$("#d").velocity("scroll", 1000 );	//滑动到指定元素
//改变元素宽度,在相对的时间里
$("#c").velocity({ width: "100px" }, 1400);
$("#c").velocity("reverse"); //恢复到改变之前的状态
//这是弹簧动画
$("#d").velocity({ width: "100px"}, [ 50, 5 ]);	//弹簧物理缓动（spring physics） 以2位数组的形式 [ tension, friction ] tension 最大值为 500，friction 最大为20
//这个不能用百分比 50%  而且这个	//这个500是因为没设置宽度
$("#a").velocity({ opacity: "0.5", left: "500px"});
$("#a").velocity({
    opacity: 0
}, {
    // 动画循环执行3次
    loop: 3,
    // 回调函数将在第3次循环结束后 执行一次
    complete: function(elements) {
        console.log("I am hungry！");
    }
});
//把两个动作组合起来 变成动画
$("#f")
    .velocity({ width: "100px", height: "100px"},{duration:2000,delay:1000})
    .velocity({
    opacity: "0.5",
    left: "200px"
}, {
    duration: 450,	//完成时间
    delay: 1000		//延迟时间
});
//$(".element").velocity({opacity: "0.5",left: "200px"},1000,"swing");  //这种写法数字参数只是完成时间,后面跟着的是动作名称,而不是延迟时间,所以要写其他参数必须向上面一样写完整,不能用这种简写的方式
//缓动模式
$("#b").velocity({ width: 50 }, {delay:1500, easing: "easeInQuint",duration: "slow" });	//总感觉这个缓动动画看不出效果来 好像所有都一样,必须放慢速度才能看出点效果来
$("#e").velocity({ width: "100px"},2000).velocity({ width: "500px"}, [ 50, 5 ]);

// 我想要的效果 只有这个最接近了, 原本easeOutBounce 最好 可是这个里面没有
$("#g")
    .velocity({ left: 200 }, { duration: 500,delay:2000 })
    .velocity("reverse", { duration: 2000 });

<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p id="d" style="background-color:blue">dddddddddddddddddddddd</p>
<p id="c" style="background-color:red">dddddddddddddddddddddd</p>
<div id="a">zzzzzzzzzzzzzz</div>
<div class="element" id="f"></div>
<div  id="b" style="background-color:red">222222222222222222</div>
<div  id="e" style="background-color:red">222222222222222222</div>
<div class="element" id="g"></div>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>
<p >dddddddddddddddddddddd</p>

#a
{
    background-color:red;
    /*     opacity:0.5; */
    /*     filter:Alpha(opacity=50);  */
}
.element {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #4dd0e1;
}

{"doctype":0,"resouces":"1,https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js","options":null,"meta":null}

velocity 测试 | JShare

模板（查看所有模板）