文档章节

jQuery Easing 动画效果扩展

林卿偎
 林卿偎
发布于 2017/08/03 15:30
字数 374
阅读 3
收藏 0

引入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  。

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

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

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

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

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

转载自 helloweba.com 原文链接:http://www.helloweba.com/view-blog-212.html

 

 

 

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

林卿偎
粉丝 0
博文 7
码字总数 3174
作品 0
广州
私信 提问
JavaScript Tween 动画效果

Tween JavaScript & CSS 源码效果网址: jquery.easing.js: 网址:https://github.com/danro/jquery-easing/blob/master/jquery.easing.js jQuery Easing Plugin(有Demo): 网址:http://......

MuBeiBei
2013/05/29
0
1
幸运大转盘-jQuery+PHP实现的抽奖程序

目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的...

蜗牛奔跑
2015/07/06
0
0
回味jQuery系列(2)-动画效果

jQuery-动画效果浅析 动画可以给网站的用户体验加分,让网页更加活泼。不过,什么东西都需要适量,简易快捷的动画会给网站加分不少。比如购物网站的个人中心按钮hover效果啊,各种hover产生的...

xzavier
2018/08/27
0
0
使用 jquery.easing.js 增强动画过渡效果

原文地址:http://www.qianxingzhem.com/post-1778.html jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ...

潜行者M
2013/03/03
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
7分钟前
0
0
Spring系列教程六:AOP详细讲解

AOP 概述 什么是 AOP AOP:全称是 Aspect Oriented Programming 即:面向切面编程。 AOP技术是对OOP技术的一种延伸,AOP是面向纵向,OOP是面向横向。简单的说它就是把我们程序重复的代码抽取...

我叫小糖主
20分钟前
7
0
Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
41分钟前
3
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
今天
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部