1、jQuery slideToggle() 表示简单的 slide panel 效果。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".flip").click(function(){ $(".panel").slideToggle("slow");
});
});</script>
<style type="text/css">
div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:70px;display:none;}</style>
</head>
<body>
<p class="flip">请点击这里</p>
<br/>
<br/>
<div class="panel" style="width:200px">
<p>JQuery</p>
<p>爱，别太认真</p>
</div>
|
2、jQuery fadeTo()表示简单的淡出效果。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});</script>
</head>
<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">点击这里查看淡出效果</button>
</div>
</body>
</html>
|
3、jQuery animate() 动画效果
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#start").click(function(){
$("#box").animate({height:500},"slow");
$("#box").animate({width:500},"slow");
$("#box").animate({height:150},"slow");
$("#box").animate({width:150},"slow");
});
});</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:red;height:150px;width:150px;position:relative"></div>
</body>
</html>
|
4、显示/隐藏切换效果 $("p").toggle();
html><head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){
$("p").toggle();
});
});</script>
</head>
<body>
<button type="button">显示/隐藏切换效果</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
|
5、jQuery 效果
| $(selector).hide() | 隐藏被选元素 |
| $(selector).show() | 显示被选元素 |
| $(selector).toggle() | 切换（在隐藏与显示之间）被选元素 |
| $(selector).slideDown() | 向下滑动（显示）被选元素 |
| $(selector).slideUp() | 向上滑动（隐藏）被选元素 |
| $(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
| $(selector).fadeIn() | 淡入被选元素 |
| $(selector).fadeOut() | 淡出被选元素 |
| $(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
| $(selector).animate() | 对被选元素执行自定义动画 |
作者：Work Hard Work Smart
出处：http://www.cnblogs.com/linlf03/
欢迎任何形式的转载，未经作者同意，请保留此段声明！
相关推荐
在实现图片轮播切换时，jQuery提供了多种动画效果，如淡入淡出（fadeIn/fadeOut）、滑动（slideUp/slideDown/slideToggle）等，这些动画效果使得图片切换更加平滑，增强了视觉吸引力。结合CSS样式和JavaScript编程，...
本项目“jquery淡出淡进文字动画效果”利用jQuery的强大功能，创建了一个文字轮播动画，实现了文字的淡入淡出效果，为网页增添动态视觉吸引力。 首先，我们来看这个项目的本质——文字轮播。这是一种常见的网页元素...
**jQuery淡出效果插件jQFader详解** 在网页设计和开发中，动态效果的运用可以提升用户体验，其中淡入淡出效果是最常见的动画之一。`jQuery`库以其丰富的功能和简洁的API，使得实现这类效果变得轻而易举。`jQFader`...
通过将这些样式应用到HTML元素上，可以控制文字在切换时的显示效果，比如淡入淡出、滑动等。 `js`文件夹内通常包含`jquery.js`（jQuery库本身）和一个或多个自定义的JavaScript文件，如`script.js`。在`script.js`...
总的来说，"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性，结合定时器实现的一种常见网页动态效果。这种效果不仅美观，还能提升网站的吸引力和用户体验。学习和理解这种代码，对于提升前端开发技能...
总的来说，"JQuery淡入淡出自动切换图片特效"是一个实用的网页设计技巧，通过结合jQuery的动画方法和JavaScript的定时器，我们可以创建出富有动态感的图片展示效果。对于前端开发者来说，掌握这种技术不仅可以提升...
"jQuery表单动画切换效果"是一个示例项目，旨在演示如何利用jQuery来创建吸引人的交互式表单切换效果，提高用户体验。这个压缩包包含了必要的HTML文件和可能的CSS或JavaScript资源，以实现这种动画效果。 首先，` ...
2. **滑动效果**：`.slideUp()`和`.slideDown()`使元素沿着垂直方向滑动，`.slideToggle()`则结合两者，让元素在滑动显示和隐藏之间切换。 3. **渐变效果**：`.animate()`可以用来改变CSS的`opacity`属性，实现元素...
本教程将聚焦于利用jQuery实现图片浏览和动画效果，特别是淡入淡出（fadeIn/fadeOut）技术。这些功能可以为用户带来更流畅、更具吸引力的浏览体验。 一、jQuery图片浏览 1. 图片轮播：jQuery 提供的滑动、切换等...
本文将深入探讨如何利用jQuery实现图片的淡出淡进自动切换效果，以及在鼠标悬停时暂停和恢复切换的功能。 一、jQuery基础 jQuery是一个JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。...
1. 添加过渡动画缓动效果：通过jQuery的`easing`插件，可以为淡入淡出和移动动画添加更多种类的缓动效果，如easeInOut、bounce等。 2. 添加预加载功能：为了提高用户体验，可以预先加载下一张图片，减少用户等待...
【jQuery千千静听音乐网站图片与...总的来说，jQuery的淡入淡出动画在音乐网站中扮演着关键角色，它们不仅提升了视觉效果，还增强了用户的互动感受。理解并熟练掌握这些技巧，对网页设计师和前端开发者来说至关重要。
"jQuery 渐变切换Tab标签"是将这一交互方式与动态视觉效果相结合，为用户提供更加吸引人的浏览体验。在本教程中，我们将深入探讨如何使用jQuery实现这种渐变切换效果，以及它与其他Tab标签的区别。 首先，让我们...
在创建切换动画时，我们主要会用到jQuery的`.show()`, `.hide()`, `.fadeIn()`, `.fadeOut()`等方法。 1. **基本动画方法** - `.show()`: 这个方法可以显示一个隐藏的元素。你可以通过指定速度参数（如`slow`, `...
它提供了基本的图片显示和隐藏功能，但根据实际需求，还可以扩展更多功能，比如添加动画效果、设置显示/隐藏的延迟时间等。例如，可以使用`fadeIn()`和`fadeOut()`方法来平滑地淡入淡出图片： ```javascript $("#...
"jQuery+CSS3立体式动画banner切换效果"是这种技术应用的一个实例，它涉及到了动态图像展示、过渡动画以及用户交互等多个方面。 jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax...
"jquery淡出淡入广告图片切换代码.zip"是一个包含实现广告图片淡入淡出切换效果的代码资源。这个功能在网页设计中常见于广告轮播或产品展示区域，能够吸引用户注意力，提升用户体验。 1. **jQuery基本概念**： - ...
本文将深入探讨如何利用jQuery实现多种动画切换图片特效，以提升用户体验和网页视觉效果。 首先，jQuery的动画功能是通过`.animate()`方法实现的，它可以平滑地改变元素的CSS属性，如宽度、高度、透明度等，从而...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括DOM操作、事件处理、动画效果以及Ajax交互等。本文将深入探讨如何利用jQuery实现显示与隐藏的效果，这对于创建交互性...
本主题聚焦于“jQuery动画切换排序点击放大切换”，这是一个常见的网页交互设计，用于提升用户体验，使用户能够通过点击事件对元素进行排序、放大查看等操作。下面将详细讲解这些知识点。 首先，jQuery的动画效果是...