1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > JQuery 动态显示和隐藏(动画)

JQuery 动态显示和隐藏(动画)

时间:2023-12-18 08:55:54

相关推荐

JQuery 动态显示和隐藏(动画)

JQuery 高级之动画

前言jQuery动画的三种方式1. 默认的显示和隐藏方式2.滑动显示和隐藏方式3.淡入淡出显示和隐藏方式

前言

最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近一直都在整理前端的一些工作中学到的小经验,大概还会有十篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的一些小知识点


jQuery动画的三种方式

今天的知识点就一个jQuery动画的三种表示方式:

默认显示和隐藏方式滑动显示和隐藏方式淡入淡出显示和隐藏方式

1. 默认的显示和隐藏方式

1.1. show([speed,[easing],[fn]])

->如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

1.2. hide([speed,[easing],[fn]])

->隐藏,如果选择的元素是隐藏的,这个方法将不会改变任何东西。

1.3. toggle([speed],[easing],[fn])

->如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

1. speed:动画的速度,可以自定义值(如:1000)毫秒数,它还有三个预定义的值(“slow”,“normal”, “fast”)

2. easing:用来指定切换效果,默认是"swing",可用参数"linear"

->swing:动画执行时效果是 先慢,中间快,最后又慢

-> linear:动画执行时速度是匀速的

3. fn:在动画完成时执行的函数,每个元素执行一次。

以下所有的的speed,easing,function都是一样的

2.滑动显示和隐藏方式

2.1. slideDown([speed],[easing],[fn])

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

2.2. slideUp([speed,[easing],[fn]])

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

2.3. slideToggle([speed],[easing],[fn])

->与toggle功能相同,只是显示的动画效果不同

3.淡入淡出显示和隐藏方式

3.1. fadeIn([speed],[easing],[fn])

->淡入效果(渐渐浮现)

3.2. fadeOut([speed],[easing],[fn])

->淡出效果(渐渐隐藏)

3.3. fadeToggle([speed,[easing],[fn]])

->与toggle功能相同,只是显示的动画效果不同

用法示例如下(示例):

<img id="imgpic" src="../img/test.jpg" width="600px" height="600px"/>//默认方式$("#imgpic").toggle("slow");//$("#imgpic").show(5000,"linear");//5秒后匀速显示$("#imgpic").hide(5000,"swing");//5秒后隐藏,速度先先慢,中间快,最后又慢

你可能会感兴趣~~《jQuery遍历的几种方式》

~~《JQuery 选择器重点内容》

创作不易,如果这篇文章能够帮助到你,希望能关注或收藏一下博主,如果文章内容有问题也可留言讨论,我们一起学习,一起进步!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。