jQuery Easing.js 插件的简单使用

jQuery Easing.js 插件的简单使用

==介绍:==easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果。

==环境:==因为easing是jQuery的插件,所以必须是在引入jquery之后再引入它

简单的写法

$(".car").animate({"left": "150%"},  4000, "easeInElastic", function() {});
复制代码

easing:格式为json,{ duration: 持续时间, easing: 过渡效果, complete: 成功后的回调函数}

示例:

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: function(){} 
}); 
复制代码

easing常见的值如下:

  1. linear
  2. swing
  3. easeInQuad
  4. easeOutQuad
  5. easeInOutQuad
  6. easeInCubic
  7. easeOutCubic
  8. easeInOutCubic
  9. easeInQuart
  10. easeOutQuart
  11. easeInOutQuart
  12. easeInQuint
  13. easeOutQuint
  14. easeInOutQuint
  15. easeInExpo
  16. easeOutExpo
  17. easeInOutExpo
  18. easeInSine
  19. easeOutSine
  20. easeInOutSine
  21. easeInCirc
  22. easeOutCirc
  23. easeInOutCirc
  24. easeInElastic
  25. easeOutElastic
  26. easeInOutElastic
  27. easeInBack
  28. easeOutBack
  29. easeInOutBack
  30. easeInBounce
  31. easeOutBounce
  32. easeInOutBounce

不同值得图示:

jQuery Easing Examples的网址

转载于:https://juejin.im/post/5cfbb1edf265da1bbd4b6771

猜你喜欢

转载自blog.csdn.net/weixin_34405354/article/details/91448609