如何设置velocity.js?

时间:2016-05-06 12:43:23

标签: jquery velocity.js web-animations

我想知道如何在我们的项目中包含velocity.js库,以便我们可以拥有更流畅的动画。 谢谢!

的index.html

<div class="demo-content">
        <div class="box" id="with-jquery">jQuery</div>
        <a href="#" class="play" id="play-jquery"><span class="ion ion-play"> 
</span>Play</a>

<div class="box" id="with-velocity">Velocity.js</div>
        <a href="#" class="play" id="play-velocity">
        <span class="ion ion-play"></span>Play</a>
</div>

的script.js

function withAnimate() {
  $("#with-jquery").animate({
    left: "500px",
  }, {
    duration: 3000, 
    easing: "linear"
  } ); 
}

$("#play-jquery").on('click', function(){
  withAnimate();
});

function withVelocity() {
  $("#with-velocity").velocity({
    left: "500px",
  }, {
    duration: 3000, 
    easing: "linear"
  } );  
}

$("#play-velocity").on('click', function(){
  withVelocity();
});

1 个答案:

答案 0 :(得分:0)

您需要在velocity.ui.js

之前加入velocity.js

velocity.js是核心库,velocity.ui.js是一组动画

我只是将你的jsbin换成working sample