zoukankan      html  css  js  c++  java
  • jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

    jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

    引入Easing js文件

    该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。

    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.min.js"></script> 

    使用jQuery Easing

    jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。

    1.jQuery默认动画

    支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:

    $(element).slideUp({ 
        duration: 1000,  
        easing: method,  
        complete: callback 
    }); 

    参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。

    参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是:linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic, easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart, easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine, easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc, easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic, easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce.各动画实际效果请参照演示demo

    参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。

    2.使用jQuery自定义动画函数animate()

    jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:

    $(element).animate({ 
        height:500, 
        600 
        },{ 
        easing: 'easeInOutQuad', 
        duration: 500, 
        complete: callback 
    }); 

    上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。

                                                                                             转载自:http://www.helloweba.com/view-blog-212.html

  • 相关阅读:
    python 安装第三方插件库报错的解决方案
    vue.js helloword
    node.js HelloWord
    十一 —— 迭代器、生成器、装饰器
    十、函数——匿名函数、推导式
    九、函数 —— 参数
    八、数据类型——bytes类型+set类型
    七、数据类型 —— 字典
    六、数据类型 —— 字符串
    五、数据类型 —— 元组
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131348.html
Copyright © 2011-2022 走看看