`

JQuery简单学习(5)——JQuery效果

jQueryJavaCSSHTML 
阅读更多
jQuery 是为事件处理特别设计的。
————————————————————
jQuery 事件函数
隐藏、显示、切换、滑动 以及动画
实例
jQuery hide()
Js代码  
<html>  
  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("p").click(function(){  
  $(this).hide();  
  });  
});  
</script>  
</head>  
  
<body>  
<p>If you click on me, I will disappear.</p>  
</body>  
  
</html>
 

演示简单的 jQuery hide() 函数。

jQuery hide()
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
$(".ex .hide").click(function(){  
$(this).parents(".ex").hide("slow");  
});  
});  
</script>  
<style type="text/css">   
div.ex  
{  
background-color:#e5eecc;  
padding:7px;  
border:solid 1px #c3c3c3;  
}  
</style>  
</head>  
   
<body>  
  
<h3>Island Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Helen Bennett<br />   
Garden House Crowther Way<br />  
London</p>  
</div>  
  
<h3>Paris Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Marie Bertrand<br />   
265, Boulevard Charonne<br />  
Paris</p>  
</div>  
  
</body>  
</html>


另一个 hide() 演示。如何隐藏部分文本。

jQuery slideToggle()
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.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:120px;  
display:none;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show/Hide Panel</p>  
   
</body>  
</html>


演示简单的 slide panel 效果。

jQuery fadeTo()
Js代码  
<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">Click to Fade</button>  
</div>  
  
</body>  
  
</html>


演示简单的 jQuery fadeTo() 函数。

jQuery animate()
Js代码  
<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>
 

演示简单的 jQuery animate() 函数。

————————————————————
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

实例
Js代码  
<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">If you click on the "Hide" button, I will disappear.</p>  
<button id="hide" type="button">Hide</button>  
<button id="show" type="button">Show</button>  
</body>  
</html>

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

语法：
Js代码 
$(selector).hide(speed,callback) 
 
$(selector).show(speed,callback) 
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：

实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("p").hide(1000);  
  });  
});  
</script>  
</head>  
<body>  
<button type="button">Hide</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>
 
————————————————————
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

语法：
Js代码  
$(selector).toggle(speed,callback)  
 speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。


实例
Js代码  
<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">Toggle</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
————————————————————
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
Js代码  
$(selector).slideDown(speed,callback)  
  
$(selector).slideUp(speed,callback)  
  
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例

Js代码  
<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>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show Panel</p>  
   
</body>  
</html>



slideUp() 实例
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $(".flip").click(function(){  
    $(".panel").slideUp("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;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Hide Panel</p>  
   
</body>  
</html>

slideToggle() 实例
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.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:120px;  
display:none;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show/Hide Panel</p>  
   
</body>  
</html>
 
  ————————————————————
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
Js代码  
$(selector).fadeIn(speed,callback)  
  
$(selector).fadeOut(speed,callback)  
  
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例
Js代码  
<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">Click to Fade</button>  
</div>  
  
</body>  
  
</html>


fadeOut() 实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#test").click(function(){  
  $(this).fadeOut(4000);  
  });  
});  
</script>  
</head>  
  
<body>  
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>  
<p>If you click on the box above, it will be removed.</p>  
</body>  
  
</html>

   ————————————————————
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
Js代码  
$(selector).animate({params},[duration],[easing],[callback])  
 关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：
Js代码  
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});  
 第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或 毫秒。


实例 1
Js代码  
<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>

实例 2
Js代码  
<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>
 
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

   ————————————————————

jQuery 效果 - 来自本页
函数 描述 $(selector).hide() 隐藏被选元素 $(selector).show() 显示被选元素 $(selector).toggle() 切换（在隐藏与显示之间）被选元素 $(selector).slideDown() 向下滑动（显示）被选元素 $(selector).slideUp() 向上滑动（隐藏）被选元素 $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动 $(selector).fadeIn() 淡入被选元素 $(selector).fadeOut() 淡出被选元素 $(selector).fadeTo() 把被选元素淡出为给定的不透明度 $(selector).animate() 对被选元素执行自定义动画
分享到：
| 使用JFreeChart生成XY轴折线图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery基础实例002——可编辑的表格

    综上所述，"jquery基础实例002——可编辑的表格"涵盖了jQuery的基本使用、事件处理、DOM操作、Ajax交互等多个方面，是学习jQuery实际应用的一个好例子。通过深入理解并实践这个实例，开发者可以提升在网页动态交互...

    Jquery基础实例01——用户名校验

    **jQuery基础实例01——用户名校验** 在Web开发中，客户端验证是必不可少的一部分，它能够提高用户体验，减少无效请求...在后续的实例中，我们可以探索更多关于jQuery的功能，如Ajax异步通信、动画效果和插件使用等。

    一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果

    在本教程中，我们将深入探讨如何使用jQuery库来实现一种常见的网页交互功能——省市二级联动效果。这种效果常用于地址选择，用户在选择省份时，下拉框中的城市选项会根据所选省份动态更新。这既提高了用户体验，也...

    一天搞定jQuery(一)——使用jQuery完成定时弹出广告

    在"一天搞定jQuery(一)——使用jQuery完成定时弹出广告"的主题中，我们将深入探讨如何利用jQuery来实现一个定时弹出的广告功能。 首先，我们需要了解jQuery的核心概念。jQuery通过选择器（Selectors）获取DOM元素，...

    用jquery仿sohu登录——邮箱文本框输入提示

    用jquery仿sohu登录——邮箱文本框输入提示 最近在弄一个网站，会员注册、登录时均需要邮箱，为是用户录入，仿sohu登录，用jquery做了一个邮箱输入智能提示，不足之处，请大家指正，不要只扔板砖啊...呵... 目前ie,...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    接下来，我们将学习如何使用jQuery来实现这一效果。首先，确保在你的HTML文件中引入jQuery库。你可以通过以下代码从CDN获取最新版本的jQuery： ```html &lt;script src="https://code.jquery....

    jquery图片加载动画——queryloader2

    jQuery QueryLoader2是一款强大的JavaScript库，专为网页中的图片加载设计出优雅的加载动画效果。这个库是由Gerben Stoel开发的，它旨在提供一种跨浏览器的解决方案，以提升用户体验，尤其是在网页内容加载期间。...

    学习jQuery中的Ajax——$.get()方法

    本篇文章将深入探讨jQuery中的Ajax方法之一——`$.get()`，以及如何通过它来实现异步数据交互。`$.get()`是jQuery提供的一个便捷的Ajax函数，用于发起GET类型的HTTP请求。 ### 一、$.get()的基本用法 `$.get()`...

    2014-10-04-深入理解jQuery（1）——jQuery对象1

    n是jQuery.prototype的别名，这样做是为了方便在jQuery的核心功能中引用原型方法。在jQuery的原型上，定义了一系列的方法，这些方法是所有jQuery对象都可以访问的。例如，`init`方法是jQuery对象的构造器，它负责...

    jquery引用文件——jquery.js

    jQuery是由John Resig开发的开源JavaScript库，其主要目标是简化JavaScript的DOM操作，同时提供丰富的事件处理、动画效果和Ajax交互。jQuery的命名源自"JavaScript"和"Quirksmode"的组合，意在解决浏览器之间的兼容...

    jQuery中文版1.4——1.7API参考手册CHM版

    本资源包含了jQuery从1.4到1.7版本的中文版API参考手册，这些CHM文件提供了详尽的函数、方法和属性介绍，是开发者学习和查阅jQuery API的重要参考资料。 在jQuery 1.4版本中，引入了一些重要的改进和新功能。例如，...

    一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    jQuery提供的便利API使得实现这样的交互变得简单且直观。在"jQueryDemo"项目中，你可能找到了一个完整的示例，包括HTML、CSS和JavaScript代码，用于演示这一功能。 总结一下，使用jQuery完成复选框的全选和全不选...

    2014-10-13-深入理解jQuery（3）——extend1

    在jQuery库中，`jQuery.extend`是一个非常重要的功能，它用于合并或扩展对象。这个方法有两种主要用途：一是实现对象的浅拷贝或深拷贝，二是添加或修改jQuery类和实例的方法。让我们通过源码分析来深入了解这个方法...

    jquery插件——手风琴效果

    **jQuery 插件——手风琴效果** 在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。手风琴效果是jQuery插件中常见的一种交互式UI设计，它允许用户通过点击展开或折叠...

    jquery插件——多级菜单

    在这个“jquery插件——多级菜单”项目中，我们可能看到以下关键技术点： 1. **CSS样式和布局**：多级菜单的呈现通常依赖于CSS来实现层次感。通过设置适当的`display`属性（如`none`和`block`），我们可以控制菜单...

    2014-12-28-深入理解jQuery（6）——Queue1

    深入理解jQuery的队列机制是理解其动画功能和异步操作的关键。队列在jQuery中扮演着重要角色，它提供了一种有序执行任务的方式，特别适用于处理动画序列和控制执行流程。本文将详细探讨jQuery队列的源码结构、基本...

    2014-10-16-深入理解jQuery（4）——Deferred1

    Deferred对象在jQuery中的应用和实现机制 Deferred对象是jQuery中的一种异步编程解决方案，它可以使得异步编程变得更加简洁和可读。Deferred对象的出现是为了解决异步编程中的回调函数问题，使得代码更加简洁和易于...

    JQuery的使用——实例讲解

    在IT领域，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，使得网页动态化和DOM操作变得简单易行。本篇文章将深入探讨jQuery的使用，并通过一系列实例来帮助理解其核心概念和功能。 首先，...

    jQuery.flipster——简单好用的立体式banner切换插件.zip

    jQuery.flipster是一款优秀的jQuery插件，专为创建立体式的轮播Banner或旋转木马效果而设计。这款插件以其简洁的API和出色的用户体验受到了许多开发者的喜爱。在本压缩包中，你将找到所有必要的资源来快速搭建一个...

    jquery 分页——jqueryPage.js

    jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果。`jqueryPage.js` 是一个基于 jQuery 的分页插件，用于帮助开发者轻松实现网页的分页功能。 `jqueryPage.js` 插件的使用首先需要...

Magicbox
Global site tag (gtag.js) - Google Analytics