JQuery运动特效

页面导航:首页 > 网络编程 > JavaScript > JQuery运动特效

JQuery运动特效

来源: 作者: 时间:2016-02-05 11:06 【

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



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


常见特效

Fadein()

淡入

Fadeout()

淡出

slideDown()

向下展开

slideUp()

向上卷起

复杂效果

Animate

stop

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


\


<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICAgIDxicj4KPC9wPgo8cD48YnI+CjwvcD4KPHA+ICAgICAgICDSsr/J0tTTw77tx/rQp7n7o6yyosfS1ri2qLav1/fN6rPJtcTKsbzko6zIy86qtdi9q7av1/e/2NbG1NrSu7j2sci9z8PAudu1xNe0zKyhozwvcD4KPHA+PGJyPgo8L3A+CjxwPjxicj4KPC9wPgo8cD48YnI+CjwvcD4KPHA+PGltZyBzcmM9"http://www.2cto.com/uploadfile/Collfiles/20141201/20141201092141153.png" alt="\">



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



\




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






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








Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<