原文来自: http://www.w3school.com.cn/jquery/jquery_effects.asp
1.显示和隐藏
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
2.切换
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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>
3. 滑动函数 slideToggle, slideUp,slideDown
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("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:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
4. fade函数
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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>
5.自定义动画
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:200px;position:relative">
HELLO
</div>
</body>
</html>
分享到：
相关推荐
**jQuery 效果详解** jQuery 是一个广泛应用于前端开发的 JavaScript 库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在本文中，我们将深入探讨jQuery中的效果部分，包括如何实现基本的...
标题“jquery高亮图片框 jquery图片展示 jquery效果很好”所指的知识点主要围绕jQuery如何实现高亮图片框以及优雅地展示图片。下面将详细介绍这两个方面，并探讨jQuery库在实现这些功能时的优势。 首先，jQuery高亮...
网页jQuery效果是前端开发中常用的技术，用于提升用户体验和页面交互性。jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。本压缩包包含12个不同的...
本篇文章将深入探讨"jquery效果经典效果"这一主题，涵盖标题和描述中提及的知识点，并结合压缩包内124种效果的文件名，为读者提供一个全面的jQuery特效指南。 一、选择器与遍历 jQuery的选择器是其强大之处之一，它...
《jQuery效果程序包详解》 在网页开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作，事件处理，动画效果以及Ajax交互等任务。本文将深入探讨jQuery的效果程序包，带你了解如何利用它来实现...
【jQuery效果走廊模式3D展览图片展示】 在Web开发中，jQuery库因其强大的功能和易用性而广受欢迎。这个“走廊模式3D展览图片展示”项目是利用jQuery实现的一种创新的图片展示方式，它为用户提供了独特的视觉体验，...
在jQuery效果中，CSS经常与jQuery的动画功能结合，改变元素的样式属性，如颜色、大小、位置等，以实现动态效果。 6. **lib**：这个文件夹可能包含其他的JavaScript库或者插件，这些库可能被`custom.js`引用，以提供...
标题中的“有关几个常见的jquery效果”意味着我们将探讨jQuery库中的一些流行效果，这些效果用于增强网页的用户体验。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得网页开发...
《jQuery效果源码详解》 在当今Web开发领域，jQuery是一个不可或缺的JavaScript库，它以其简洁的API和强大的功能赢得了广大开发者的心。本资源“jQuery效果源码.rar”包含了一系列与jQuery相关的网页文件，旨在帮助...
80个JQuery效果是这个压缩包中的核心内容，jQuery是一个高效、简洁、易用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。这80个例子可能涵盖了常见的网页动态效果，如滑动、...
"不错的jquery效果"这个标题暗示我们将探讨一些利用jQuery实现的出色效果和功能。 首先，jQuery的核心特性在于其简洁的API，使得开发者能够用更少的代码完成复杂的任务。例如，通过一个简单的`$("#elementId")....
常用的jquery 插件. 漂亮的jquery 效果
【轮换滚动图片jQuery效果】是一种常见的网页动态展示技术，常用于网站的广告展示或产品展示区域，可以吸引用户注意力并提升用户体验。这种效果通过JavaScript库jQuery实现，它简化了DOM操作，使得创建动态效果更加...
【标题】：“原创 jQuery 效果大杂荟” 在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。这篇名为“原创 jQuery 效果大杂荟”的博客文章，可能是作者对...
网站常用jquery效果 jquery控件 包括 日历控件、tab控件、进度调、对话框、窗口弹出等效果 /jquery-ui-1.8.4.custom/development-bundle/demos/index.html 从这里进入
仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿...
《jQuery效果与事件详解》 在网页开发中，jQuery库以其简洁、强大的API深受开发者喜爱。本文将深入探讨jQuery中的效果与事件，帮助你更好地理解和运用这一强大的工具。 一、jQuery简介 jQuery是由John Resig在...
10种jquery效果，01下拉风格，02删除内容效果，03内容隐藏，04好看的Title，05超大链接区，06隐藏式评论，07WordPress评论效果，08图片切换，09自动链接式样，10跑动的区域
50个jquery效果源码,js特效,指向滑动按扭,选项卡,选项卡切换,手风琴效果,图片的缩放,相片画廊,淡化效果,水平或垂直的列表,拾色器,高亮图片框,验证规则,表单Check样式,星形评级系统,多功能表格,拖拽插件,拖拽树形菜单...