首页 前端知识 jQuery框架实现元素显示及隐藏动画【附案例分析】

jQuery框架实现元素显示及隐藏动画【附案例分析】

2024-07-02 23:07:50 前端知识 前端哥 143 451 我要收藏

// 滑动显示div

$(“#showDiv”).slideDown(“slow”);

滑动方式下隐藏

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

实例代码:

// 滑动隐藏div

$(“#showDiv”).slideUp(“fetch”);

滑动方式下既显示又隐藏:

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

实例代码:

// 滑动能显示能隐藏

$(“#showDiv”).slideToggle(“slow”);

滑动方式下实现效果如图:

三、淡入淡出方式显示和隐藏

=================

淡入淡出方式下进行元素的显示和隐藏其实和上面两种方法一样的,不同的也只是显示的效果不一样罢了,

淡入淡出方式下显示使用的方法是:

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

实现代码:

// 淡出显示div

$(“#showDiv”).fadeIn(“slow”)

淡入淡出方式下实现隐藏

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

实现代码:

// 淡出隐藏div

$(“#showDiv”).fadeOut(“fetch”);

淡入淡出方式下既显示又隐藏

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

实现代码:

// 淡入淡出显示和隐藏div

$(“#showDiv”).fadeToggle(“fetch”)

淡入淡出方式下运行的效果如下:

以上就是利用jQuery框架对元素进行显示和隐藏的方法,下面是上面实例的完整实现代码:

默认方式显示和隐藏动画

div显示和隐藏

四、案例:广告的自动显示和隐藏

===================

既然现在我们已经知道了jQuery框架下是如何进行元素的显示和隐藏的,那么就应该将其应用到实际的案例中去,下面通过实现广告的自动显示和隐藏的案例,来对该技术进一步加强实践。

我们要实现的是,在一个简单的网页中,页面打开三秒后将广告图显示出来,显示五秒后再将广告隐藏,这里对广告图片显示和隐藏的操作,根据上面的讲解,现在实现图片的显示和隐藏应该是很容易的了,那么到底应该如何实现延时显示和隐藏呢?

这里就要用到js中的一个定时器setTimeout(方法,时间);

该方法的第一个参数是一个方法名,如显示或隐藏图片的方法,第二个参数是毫秒数,表示页面加载完成后多少秒执行该方法,

那么根据思路,我们就可以在jQuery的入口函数中写入,页面加载完成3000毫秒,也就是三秒后调用显示图片的方法;页面加载完成8000毫秒,也就是八秒后调用隐藏图片的方法,中间空余的五秒为显示图片的时间。

下面我们来讲上述需求实现,完整代码如下:

广告的自动显示与隐藏

正文部分

**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

最后

一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可获取

]

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

最后

一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可获取

[外链图片转存中…(img-IcGA8jnw-1712940854078)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13846.html
标签
评论
发布的文章

jquery video视频轮播播放

2024-09-27 09:09:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!