当前位置: 首页 > 编程笔记 >

jQuery淡入淡出元素让其效果更为生动

郭德惠
2023-03-14
本文向大家介绍jQuery淡入淡出元素让其效果更为生动,包括了jQuery淡入淡出元素让其效果更为生动的使用技巧和注意事项,需要的朋友参考一下

为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数:

·fadeIn()使得一个隐藏的元素淡入视野。首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走);然后,元素逐渐地变得可见。如果元素在页面上已经可见,则这个函数没有任何效果。如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒)。

·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它。如果元素在页面上已经隐藏,这个函数没有任何效果,这和fadeIn()函数一样。如果没有提供一个速度值,元素以400毫秒的速度淡出。

·fadeToggle()组合了淡入和淡出的效果。如果该元素当前是隐藏的,它会淡入视线中;如果它当前是可见 的,该元素会淡出视线。可以使用这个函数让一个提示框出现在页面上或从页面消失。例如,假设有一个按钮,其上显示单词“instructions”。当访 问者单击该按钮的时候,带有说明的一个div将淡入视线;再次单击该按钮,将会使说明淡出视线。要让该提示框每半秒钟淡入或淡出一次,可以这样编写代码:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
});//end click

·fadeTo()的工作方式和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如,可以让图像淡化到半透明。和其他效果不同,必须提供一个速度值。此外,还提供0~1之间的一个值来表示元素的透明度。例如,要把所有的段落淡化到75%的透明度,可以这样编写代码:

$('p').fadeTo('normal',.75);

这个函数改变了一个元素的透明度,而不管这个元素是可见的还是不可见的。例如,假设要把当前隐藏的一个元素淡化到50%的透明度。然后,如果使用 show()或fadeIn()显示该元素,它会以50%的透明度显示。同样,如果隐藏一个半透明的元素,然后再显示它,它的透明度设置还是会恢复。

 类似资料:
  • 问题内容: ..当前它具有上/下滚动效果,但是我希望背景随着淡入淡出效果而改变,我应该在CSS中更改什么? 谢谢! 问题答案: 您无法在两个背景图片之间切换,因为浏览器无法知道您想要插入的内容。如您所知,您可以转换背景位置。如果您希望图像在鼠标悬停时淡入,我认为通过CSS过渡实现此效果的最佳方法是将图像放在包含元素上,然后在链接本身上为背景颜色设置动画:

  • 问题内容: 我有一个组件,单击时需要切换一个组件。这有效: 它使用条件显示或不显示组件。现在,我希望它逐渐消失。我尝试添加一个挂钩以过渡不透明度,但这不起作用。有没有简单的方法可以做到这一点? 问题答案: 使用CSS类切换+不透明度转换的示例:https : //jsfiddle.net/e7zwhcbt/2/ 这是有趣的CSS: 和render函数:

  • 主要内容:实例,jQuery Fading 方法,jQuery fadeIn() 方法,实例,jQuery fadeOut() 方法,实例,jQuery fadeToggle() 方法,实例,jQuery fadeTo() 方法,实例通过 jQuery,您可以实现元素的淡入淡出效果。 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQ

  • 本文向大家介绍jquery实现淡入淡出轮播图效果,包括了jquery实现淡入淡出轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码,供大家参考,具体内容如下 如题所述,直接上代码 其实淡入淡出轮播图的核心思想就是获取到当前的索引,根据索引找出图片的索引然后更改索引达到一个图片显示 其他图片消失 然后轮流交替进行的。最主要的核心思想在上面

  • 本文向大家介绍jQuery实现图片文字淡入淡出效果,包括了jQuery实现图片文字淡入淡出效果的使用技巧和注意事项,需要的朋友参考一下 本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在

  • 本文向大家介绍jquery实现的淡入淡出下拉菜单效果,包括了jquery实现的淡入淡出下拉菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性