jquery淡入淡出特效-js淡入动画 收藏 0

jQuery 动画制作与特效

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

HTML代码：

制作多级菜单

jQuery代码:

HTML代码:

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

HTML代码:

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

HTML代码：

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

HTML代码:

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

HTML代码:

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

HTML代码:

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

HTML代码:

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

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

jQuery 代码:

实例：阻止动画播放

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

我采访了一位 Pornhub 工程师，聊了这些纯纯的话题

站在推动 Web 发展方面所起到的作用无可辩驳。从突破浏览器的视频能力限制，到利用 WebSocket 推送广告（防止被广告拦截），你必须不断想出各种聪明的办法，让自己处在 Web 技术创新的最前沿。

最近，我有幸采访了大型站 Pornhub 的一位 Web 开发工程师，了解了相关的开发技术、Web API 的改进，以及作为站开发工程师是一种怎样的体验。

注意：因为站这个行业竞争相当激烈，有一些问题他们不能回答我，这一点我表示理解。

站需要显示大量的图像内容，在开发过程中，你是否使用了大量的图片和视频占位符？开发过程中的内容体验和最终产品差距大吗？

实际上，在开发这个网站时我们并没有使用占位符！归根结底，代码和功能才是最重要的东西，至于界面什么的，到了这个时候我们已经很熟悉了。刚开始时有一点难度，但很快我们就适应了。

在开发过程中，你们是如何模拟直播视频流和第三方广告脚本的？它们都是很重要的资源。

播放器被分为两个组件，基本组件实现了核心功能，用于触发事件。开发是单独进行的，在进行集成时，我们需要用到第三方脚本和广告，这样可以尽早发现问题。对于一些特殊情况，我们会与广告主合作，通过手动的方式来触发一些随机事件。

一般页面上至少会有一个视频、一些 GIF 广告、一些直播预览和其他视频的缩略图。你是如何测定页面性能的？以及如何尽量提升页面的性能？

我们使用了一些测评系统。

播放器会将视屏播放的性能和用户播放情况发送给我们；

我们使用了第三方的 RUM 系统；

我们使用了 WebpageTest，这样就可以知道在某个时段发生了什么事情。

我假设播放器是前端的一个最重要也最复杂的功能。在视频前面插入广告、标记视频的关键部分、改变播放速度，等等，你是如何保持播放器的性能、功能和稳定性的？

我们有一个专门负责开发播放器的团队，他们的首要任务是持续地监控播放器的性能。我们用上了所有可用的工具：浏览器性能工具、WebpageTest、性能指标，等等。每次在发布更新之前，我们都会进行一轮严格的 QA 来保证稳定性和质量。

视频团队有多少专职开发人员？有多少前端开发人员？

我只能说，如果从整个产品的规模来看，我们的团队规模算是中等的。

在从事站开发期间，你看到前端领域经历了哪些发展？有哪些新的 Web API 给你带来很大的帮助？

我看到前端技术在很多方面都有进步。

从使用纯 CSS 到使用 LESS 和 Mixin，再到使用灵活的栅格系统和图像标签来适应不同的分辨率和屏幕大小；

jQuery 和 jQueryUI 逐渐淡出了我们的视线，我们回到了更加面向对象的纯 JavaScript 编程。一些框架在某些场景下也起到非常有趣的作用；

我们很喜欢新的 IntersectionObserver API，用它来加载图像非常高效；

我们还使用了画中画 API，让视频漂浮在页面上，不过现在还在争取用户对这个想法的反馈。

展望未来，有没有哪些 Web API 是你希望发生变化、改进的？或者出现新的 Web API？

我们希望这些 API 能够发生变化或改进：Beacon、WebRTC、Service Worker 和 Fetch。

Beacon：在 iOS 上有些问题，对 pageHide 事件支持得不太好；

Fetch：没有下载进度，也没有提供拦截请求的方式；

WebRTC：在进行直播时，如果分辨率不够大就会有所限制；

Service Worker：调用 navigator.serviceWorker.register 不会被 Service Worker 的 Fetch 事件处理器拦截到。

WebVR 在过去几年已经有所改进。目前来看，它的作用有多大？站会投入多大精力来支持 VR 内容？Pornhub 的 WebVR 有涉及触觉技术吗？

我们正在研究如何将 WebXR 应用在沉浸式空间场景中。作为最大的内容分发平台，我们有必要为用户提供让他们能够按照自己的方式来体验网站内容的机会。但我们还在探索，在使用这些新媒体时，内容和平台应该是什么样子。

我们是支持 VR、计算机视觉和虚拟主播的一个主要平台，我们将继续推动新技术的发展。

每个页面上都有不同类型的媒体和内容，对于桌面版或移动版来说，最需要考虑的东西是什么？

我们主要考虑操作系统和浏览器对功能方面的限制。比如，iOS 和 Android 在访问权限和功能方面就非常不一样。

一些 iOS 设备不允许在全屏时使用自定义播放器，它们会强制使用原生的 QuickTime 播放器。而 Android 则给了我们完全的控制权限，可以在全屏时使用我们的播发器。

另一个例子是 HLS 视频流，IE 和 Edge 对 HLS 视频流质量非常挑剔，所以我们需要控制视频的质量，否则在播放时就断断续续或者出现重影。

目前 Pornhub 可以支持的最低浏览器版本是哪个？现在还支持 IE 吗？

我们支持 IE 很长时间了，但最近不支持 IE 11 之前的版本。另外，我们也停止支持 Flash 播发器。我们现在主要支持 Chrome、Firefox 和 Safari。

可以分享一下 Pornhub 的技术栈吗？从服务器端到前端，你们使用了哪些库？

基本上，我们使用了这些东西：

Nginx；

PHP；

MySQL；

Memcached/Redis。

其他技术还包括 Varnish、ElasticSearch、NodeJS、Go 语言、Vertica。

前端方面，我们主要使用了纯 JavaScript。我们在逐步淘汰 jQuery，并开始使用框架，比如 Vue.js。

在外行看来，站的网页上一般充斥着各种视频缩略图、视频、直播和广告。从开发者的角度来看，是什么东西让一个站变得与众不同？

我们努力让每一个品牌都具备一定程度的独特性，不同的内容、界面体验和功能，还使用了很多不同的算法。

在面试 Pornhub 时，你是怎么想的？你有犹豫过吗？如果有，又是怎么消除这种情绪的？

我没有感到有什么不妥，毕竟这个挑战对我来说充满了吸引力。一想到有数百万人会用到我开发的东西，我就感到很兴奋。这个想法很快就得到了验证，当我开发的功能第一次上线时，我感到很自豪，我还叫我的朋友们也去看看！站永远都不会消亡，它为我们提供了稳定的工作来源。

与开发一般的网站相比，开发站可能会有所不同。当你告诉你的朋友、家人和熟人自己在开发站，你会觉得这是一种耻辱吗？你会犹豫告诉他们这些吗？

我为自己开发的东西感到自豪，我身边的人都知道，也很喜欢它们。这也成了我们的茶余饭后的谈资，非常有意思。

你也在其他地方开发过其他网站，在 Pornhub 的工作氛围有什么不同吗？

这里的氛围非常轻松友好，我不觉得跟在其他地方有什么不同。

作为前端开发人员，你需要与哪些团队密切接触？你们平常常用哪些交流方式？

我们需要与后端开发人员、QA 和产品经理打交道。大部分时间我们会跑到各自的工位上讨论问题，其次是使用聊天工具（Microsoft Teams），然后是电子邮件。

最后，作为一名在站工作的开发工程师，你还有什么想要分享的吗？

我非常高兴能够参与开发这个有如此大规模用户的产品。我们身处技术发展的最前沿，这让一切都变得有趣且颇具挑战性。

后记

这个采访很有启发性。我很惊讶他们在开发时居然没有使用图像。Pornhub 走在 Web 技术的最前沿——WebXR、WebRTC 和 Intersection Observer API。我也很高兴看到他们开始逐步淘汰 jQuery，因为现在的 Web API 很给力。

我很想从他那里挖到更过有关技术和性能的细节，我敢肯定他们的源代码里有很多值得一学的东西。换了是你，你会想问哪些问题？

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com