JQuery运动特效

简介:        JQuery作为一个强大的JS框架,为我们在实际中避免了很多问题,比如,不会写算法,总得做浏览器的兼容等等。最近用到了JQuery的一些特效,拿出来复习下。      常见特效 Fadein() 淡入   ...



       JQuery作为一个强大的JS框架,为我们在实际中避免了很多问题,比如,不会写算法,总得做浏览器的兼容等等。最近用到了JQuery的一些特效,拿出来复习下。


    

常见特效

Fadein()

淡入

 

Fadeout()

淡出

 

slideDown()

向下展开

 

slideUp()

向上卷起

复杂效果

Animate

 

 

stop

 

 

     例如,现在我想做一个这样的效果:界面上有个按钮,当点击这个按钮的时候,div出现,再次点击,div块消失。为div这两个动作添加淡入淡出效果:

 

 


    


        也可以用卷曲效果,并且指定动作完成的时间,人为地将动作控制在一个比较美观的状态。






  如果是鼠标移入时的事件,我们可以使用hover,并添加两个函数用于状态切换:






   但是当我们在浏览器中查看上图代码的效果时,我们会发现,如果我快速移如鼠标,又快速移出,反复几次,即使鼠标离开了,效果还在,这个并不是我们所期望的,这时,我们可以加入stop方法,清除动作的堆栈效果。






   基于Jquery比JS有着众多的优势,比如:网页元素的选择,方法函数化,链式操作,元素移动,强大创建,方法和事件的超赞写法,感觉框架就是好哇~








目录
相关文章
|
前端开发 JavaScript 数据格式
第209天:jQuery运动框架封装(二)
运动框架 一、函数------单物体运动框架封装 1、基于时间的运动原理 动画时间进程 动画距离进程 图解: 物体从0移动到400 当物体移动到200的时候 走了50% 同样的,物体总共运行需要4秒 如果已经过了2.
1086 0
|
Web App开发 JavaScript UED
直逼 Flash 的流畅感:jQuery 运动特效展示
目前,围剿 Flash 的不仅有 HTML 5,还有 JavaScript,著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅,有时候你需要点一下右键来确认它不是 Flash。
910 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
7月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
3月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
28 0
|
8月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
57 0
|
4月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
56 1
|
5月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
28 0