#target

#btns
  button#jq jQuery
  button#vo Velocity.js
View Compiled
#target
  position: absolute
  top: 0
  left: 0
  width: 50px
  height: 50px
  background-color: #f00
  
#btns
  position: absolute
  top: 100px
View Compiled
//jQuery 寫法
$('#jq').click(()=>{
  $('#target').animate({
    left: 300
  }, {
    duration: 500,
    complete: function(){
      alert('完成位移,將恢復原狀!')
    }
  })
  reset('jq');
})

//改用 Velocity.js 試試
//animate => velocity
$('#vo').click(()=>{  
  $('#target').velocity({
    translateX: 300, //預設單位就是px,不需寫成translateX: "300px"
    backgroundColor: "#00f", //不能打"blue",只能打色碼
    rotateZ: "45deg",
    opacity: .5
  },{
    duration: 500,
    complete: function(){
      alert('完成位移、變色、旋轉、透明度,將恢復原狀!')
    }
  })
  reset('vo');
})

var reset = function(now){   
  switch(now){
    case 'jq':
      $('#target').animate({left: 0}, 500)
      break;
    case 'vo':
      $('#target').velocity({
        translateX: 0,
        backgroundColor: "#f00",
        rotateZ: "0deg",
        opacity: 1
      },500)  
      break;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js