在网页中，用网页内容淡入淡出可以使得网页内容更加生动，在jQuery中实现起来比较简单，用的方法主要是这几个
（1） fadeIn() 用于淡入已隐藏的元素。
（2）jQuery fadeOut() 方法用于淡出可见元素。
（3）jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
(4) jQuery fadeTo(speed,opacity,callback) 其中， speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。
具体实现代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script>
$(document).ready(function(){
$("#b").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(3000);
});
$("#b1").click(function()
{
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<button id="b">点我，使三个矩形淡入</button>
<button id="b1">点我，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
或者用fadeToggle(),代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script>
$(document).ready(function(){
$("#b").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
$("#b1").click(function()
{
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<button id="b">点我，使三个矩形淡入</button>
<button id="b1">点我，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
实现三个不同颜色的矩阵在网页中的淡入和淡出。
相关推荐
"jquery插件库-网页翻滚淡入淡出.zip"这个压缩包显然包含了与jQuery相关的插件，主要用于实现网页内容在用户滚动页面时的淡入淡出效果。这种效果在现代网页设计中非常常见，可以增加网站的视觉吸引力，提高用户体验...
Effects则提供了各种动画效果，如Fade（淡入淡出）、Slide（滑动）等。Position模块提供了元素相对定位的功能，而Utilities则是各种实用函数的集合，为开发带来便利。 在使用"jquery-ui-1.8.2.custom.min.js"之前，...
在本篇博客"AJAX学习总结（五）---窗口的淡入淡出和css学习"中，作者主要探讨了如何利用AJAX技术实现网页元素的动态更新，以及结合jQuery库来实现窗口的淡入淡出效果。同时，还涉及了一些CSS的基础知识。以下是关于...
在网页设计中，首页轮播图通常用于展示网站的重要内容或吸引用户的注意力。jQuery作为一种强大的JavaScript库，提供了丰富的功能来实现动态效果，如首页轮播的淡入淡出效果。这种效果可以使得页面更加生动，提升用户...
5. **动画效果**：解释如何利用jQuery UI的内置动画效果，如淡入淡出（Fade）、滑动（Slide）等，增强用户体验。 6. **无障碍性**：讨论如何确保jQuery UI组件符合无障碍性标准，使所有用户都能方便地使用。 7. **...
2. **淡入淡出效果** 淡入淡出效果是通过调整元素的透明度来实现的。在CSS中，我们可以使用`opacity`属性控制元素的透明度，结合`transition`属性实现平滑过渡。在JavaScript中，可以动态改变元素的`style.opacity`...
3. **Effects**：jQuery UI 提供了一套完整的特效库，如淡入淡出（Fade）、滑动（Slide）、切换（Toggle）等，以及一个用于自定义动画效果的工具集。 4. **Positioning**：这个功能可以帮助开发者精确地定位页面...
本教程将聚焦于利用jQuery实现图片浏览和动画效果，特别是淡入淡出（fadeIn/fadeOut）技术。这些功能可以为用户带来更流畅、更具吸引力的浏览体验。 一、jQuery图片浏览 1. 图片轮播：jQuery 提供的滑动、切换等...
总的来说，"jQuery超酷文字淡入淡出显示特效"是一种利用jQuery和特定插件增强网页动态性的方法。它使开发者能够轻松地为网站添加视觉吸引力，提升用户体验，而且由于其轻量级和灵活性，适用于各种项目。通过熟悉...
网页图片淡入淡出是一种常见的网页视觉效果，它使得网页上的图片在切换时不是瞬间跳转，而是通过渐变的方式平滑过渡，增加用户的浏览体验。这种效果通常应用于轮播图（carousel）或图片库等元素，使得多张图片能够...
3. **效果（Effects）**: 提供了各种视觉效果，如淡入淡出（Fade）、滑动（Slide）、切换（Toggle）等，以及自定义效果的构建工具。 4. **小部件（Widgets）**: 包括日历（Datepicker）、对话框（Dialog）、进度条...
jQuery UI提供了一套完整的UI组件，包括Tab选项卡，且内置了多种动画效果，包括淡入淡出。如果使用jQuery UI，上述JavaScript代码可以更简洁： ```javascript $(function() { $("#tabs").tabs({ fx: { opacity: ...
在网页设计中，为了吸引用户的注意力并提供良好的用户体验，经常使用动态效果，如广告的淡入淡出。这种效果能够使网页看起来更加生动且专业，同时避免过于突兀的广告切换给用户带来不适。"css网页广告淡入淡出"是...
总的来说，"JQuery淡入淡出自动切换图片特效"是一个实用的网页设计技巧，通过结合jQuery的动画方法和JavaScript的定时器，我们可以创建出富有动态感的图片展示效果。对于前端开发者来说，掌握这种技术不仅可以提升...
总的来说，"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性，结合定时器实现的一种常见网页动态效果。这种效果不仅美观，还能提升网站的吸引力和用户体验。学习和理解这种代码，对于提升前端开发技能...
本教程将深入讲解如何使用jQuery来实现一个左右淡入淡出滑动的效果，这种效果通常用于创建引人注目的提示信息或者新闻滚动展示。 首先，我们需要在HTML页面中引入jQuery库。如果还没有引入，可以通过以下方式添加...
《jQuery淡入淡出瀑布流效果的实现与应用》 在网页设计中，动态效果的运用可以极大地提升用户体验，使得网站或应用更具吸引力。其中，jQuery的淡入淡出瀑布流效果是一种常见的视觉表现手法，它结合了瀑布流布局的...
同时，CSS3的过渡效果可能被用来实现图片淡入淡出、缩放等动态展示。 4. **JavaScript编程**：插件的核心是JavaScript代码，它处理图片的加载、显示、隐藏以及用户交互。比如，当用户点击图片链接时，JavaScript会...
jQuery淡入淡出幻灯片主要依赖于jQuery库的动画功能，特别是`.fadeIn()`和`.fadeOut()`两个方法。这两个方法分别用于元素的渐显和渐隐，通过控制透明度来实现平滑的过渡效果。当一个幻灯片元素淡出时，另一个元素会...
crossfade.js是一个非常小的jQuery插件程序.当您滚动鼠标时图像实现叉淡入淡出效果。浏览器要求ie8以上版本。演示地址：http://www.jq22.com/jquery-info459