`
吕金含
  • 浏览: 84756 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jQuery 淡入淡出

 
阅读更多
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
实例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
实例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
分享到:
评论

相关推荐

    JQuery淡入淡出自动切换图片特效

    "JQuery淡入淡出自动切换图片特效"就是一种常见的实现方式,它利用jQuery库的动画功能,使图片在页面上以淡入淡出的方式自动切换,既美观又具有交互性。接下来,我们将深入探讨这个知识点。 首先,jQuery是一个轻量...

    Jquery淡入淡出幻灯片特效图片切换源码下载

    在这个“Jquery淡入淡出幻灯片特效图片切换”源码中,主要应用了jQuery的动画功能和定时器功能。 淡入淡出效果是jQuery中最常见的动画效果之一,主要通过`.fadeIn()`和`.fadeOut()`两个方法实现。`.fadeIn()`方法...

    jQuery淡入淡出瀑布流效果.zip

    《jQuery淡入淡出瀑布流效果的实现与应用》 在网页设计中,动态效果的运用可以极大地提升用户体验,使得网站或应用更具吸引力。其中,jQuery的淡入淡出瀑布流效果是一种常见的视觉表现手法,它结合了瀑布流布局的...

    jquery淡入淡出轮播图

    "jquery淡入淡出轮播图"是利用jQuery库实现的一种动态效果,为用户提供了一种优雅的图片切换体验。jQuery是一个轻量级、功能丰富的JavaScript库,它的API简洁易用,使得创建交互式的网页变得更为简单。 该插件的...

    超实用的jQuery淡入淡出焦点图插件 带3D相框

    在本主题中,我们将深入探讨jQuery中的淡入淡出(FadeIn/FadeOut)功能以及如何结合3D相框效果创建一个超实用的焦点图插件。 首先,淡入淡出效果是jQuery中最基础且常用的功能之一。`fadeIn()`方法用于让元素逐渐变...

    jQuery淡入淡出图片切换的幻灯插件.rar

    基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,...

    jQuery淡入淡出瀑布流效果

    jQuery淡入淡出瀑布流效果是一种常见的网页设计技术,它结合了jQuery库的动画功能与瀑布流布局,为用户呈现动态、美观的图片展示。在本文中,我们将深入探讨这一技术的核心概念、实现方法以及其在不同浏览器上的兼容...

    jQuery淡入淡出文字动画特效.zip

    jQuery淡入淡出文字动画特效是一种常见的网页交互设计,它为网页内容的展示带来动态视觉效果,提升用户体验。这一特效的实现主要依赖于JavaScript库jQuery和一个名为`jquery.easing.1.3.js`的插件,后者提供了丰富的...

    jQuery淡入淡出宽屏幻灯片.zip

    jQuery淡入淡出宽屏幻灯片是一款基于JavaScript库jQuery设计的高效且用户友好的幻灯片插件,主要用于在网站上创建引人注目的宽屏展示效果。它以其独特的淡入淡出过渡动画和缩略图导航功能,为浏览者提供了一种流畅的...

    jQuery淡入淡出下拉菜单.zip

    首先,jQuery淡入淡出下拉菜单的核心在于利用jQuery的动画效果和事件监听来实现动态交互。当用户鼠标悬停在主菜单项上时,子菜单会以淡入的方式出现;当鼠标离开时,子菜单则淡出消失。这种平滑过渡的效果既增加了...

    JQuery淡入淡出 banner切换特效

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大...通过以上步骤,你就可以在自己的网站上实现一个专业且吸引人的jQuery淡入淡出Banner切换特效了。这个效果可以增强用户体验,使网站看起来更加生动和动态。

    jQuery淡入淡出全屏幻灯片自动轮播图代码.zip

    【jQuery淡入淡出全屏幻灯片自动轮播图代码】是一款专为网页设计而开发的JavaScript特效,尤其适用于创建吸引人的宽屏图片展示。这个代码实例具有良好的浏览器兼容性,包括对IE8的支持,这在当前的技术环境中是相当...

    jQuery淡入淡出焦点图广告轮播插件

    **jQuery淡入淡出焦点图广告轮播插件详解** 在网页设计中,吸引用户注意力并展示重要信息的一种常见方式是使用广告轮播图。这种交互式的组件通常包含多张图片,通过各种动画效果进行切换,以展示不同的产品或服务。...

    jQuery实用淡入淡出幻灯片.zip

    jQuery淡入淡出幻灯片主要依赖于jQuery库的动画功能,特别是`.fadeIn()`和`.fadeOut()`两个方法。这两个方法分别用于元素的渐显和渐隐,通过控制透明度来实现平滑的过渡效果。当一个幻灯片元素淡出时,另一个元素会...

    JQuery淡入淡出窗口

    <title>jQuery淡入淡出窗口示例 <!-- 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 你的内容区域 --> ``` 接下来,我们创建一个HTML元素,如一个div,作为...

    jQuery淡入淡出带缩略图的轮播插件

    首先,我们要理解jQuery淡入淡出效果。这种效果是通过`.fadeIn()`和`.fadeOut()`方法实现的,它们允许我们在网页上平滑地改变元素的不透明度,从而达到渐显或渐隐的效果。`.fadeIn()`方法用于使元素逐渐变得可见,而...

    jQuery淡入淡出下拉菜单

    在这个特定的主题"jQuery淡入淡出下拉菜单"中,我们将探讨如何利用jQuery实现动态且具有视觉吸引力的下拉菜单效果,这在现代网站设计中是非常常见的一种交互方式。 首先,下拉菜单通常用于网站导航,它允许用户通过...

    jquery淡入淡出幻灯展示插件

    标题中的“jquery淡入淡出幻灯展示插件”指的是使用jQuery库实现的一种网页动态效果,通常用于创建图片轮播或者内容切换的功能。这种插件可以让多个元素(如图片或文字)按照一定的顺序以淡入淡出的方式进行切换,...

Global site tag (gtag.js) - Google Analytics