jQuery动画事件

在学习 jQuery中，jQuery动画也会经常用到的，需要的可以作参考（仅供参考）。

1.show()与hide()、toggle()方法

show()方法是显示隐藏的匹配元素,而hide()方法是隐藏显示的元素。

toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。例如：

2. slideDown()、slideUp()和slideToggle()滑动的方法

slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素。

slideUp()通过高度变化（向上减小）来动态地隐藏所有匹配的元素。

slideToggle()通过高度变化来切换所有匹配元素的可见性。

3. fadeIn()、fadeOut()和fadeToggle()、fadeTo()淡入淡出的方法

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果。

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果。

fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。

fadeToggle()通过不透明度的变化来来开关所有匹配元素的淡入淡出效果。

参考如下图：

4. animate自义定动画

animate()可以指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”等。）

5.stop()和finish()停止动画的方法

stop()是停止所有在指定元素上正在运行的动画。

finish()是停止动画的方法停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

6 .delay()动画延时

delay()可以推迟动画队列的执行，也可以用于自定义队列。

以上就是我想要分享jQuery动画事件的相关内容(仅供参考)。其运行效果，请自行测试！

新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

jQuery动画事件相关推荐

jQuery 动画事件
目录动画代码演示效果图代码演示效果图事件代码演练动画 jQuery动画:基本包含了一个动画的显示滑动出入效果等三种效果显示动画 1.显示动画 show() 2.隐藏动画 hi ...
JQuery 动画和事件
今天是JQuery的第四节课啦,今天主要讲JQuery的动画和事件,大家有不懂的在下方评论或者私信,也希望和小编一样在长沙的家人们,做好防疫措施,出门带好口罩,能不出门尽量不出门,不给国家添麻烦. ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

jQuery动画事件

jQuery动画事件相关推荐

最新文章

热门文章