当前位置：文档之家 › JQuery学习笔记_动画效果

JQuery学习笔记_动画效果

  • 格式：wps
  • 大小：487.29 KB
  • 文档页数：29

JQuery学习笔记_动画效果—用于进行文档处理，并可能带有过渡的动画效果。

常见动画效果函数1、show()（1）、该函数用于显示所有匹配的元素。

此外，你还可以指定元素显示的过渡动画效果。

如果元素本身是可见的，则不对其作任何改变。

如果元素是隐藏的，则使其可见。

与该函数相对的是hide()函数，用于隐藏所有匹配的元素。

（2）、如果没有为show()指定任何参数，则将以最快方式直接显示元素，不使用动画效果。

（3）、参数：slow表示元素将在600毫秒内慢慢的显示出来；normal表示元素将在400毫秒内慢慢的显示出来；fast表示元素将在200毫秒内慢慢的显示出来。

（4）规定在动画的不同点上元素的速度。

默认值为"swing"。

swing表示在开头/结尾移动慢，在中间移动快；linear表示匀速移动。

duration: 1000表示指定动画效果在1000毫秒内显示出来。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery动画效果之show</title><script type="text/javascript" src="../js/jquery-1.12.4.js"></script> </head><body><p>CodePlayer</p><p>专注于编程开发技术分享</p>显示效果：<select id="animation"><option value="1">show( )</option><option value="2">show( "slow" )</option><option value="3">show( 3000 )</option><option value="4">show( 1000, complete )</option><option value="5">show( 1000, "linear" )</option><option value="6">show({ duration: 1000 } )</option> </select><input id="btnShow" type="button" value="显示" /><input id="btnHide" type="button" value="隐藏" /> </body></html>$(function(){//给隐藏按钮添加单击事件，点击时，隐藏p元素$("#btnHide").click(function(){//隐藏匹配的p元素$("p").hide();});//给显示按钮添加单击事件，点击时，显示p元素$("#btnShow").click(function(){//获取下拉框选中项的值var animationValue=$("#animation").val();//根据不同的值，执行相应的动画效果if(animationValue=="1"){//以最快的方式显示p元素，不使用动画效果$("p").show();}else if(animationValue=="2"){//p元素将在600毫秒内慢慢显示出来$("p").show("slow");}else if(animationValue=="3"){//p元素将在3000毫秒内慢慢显示出来$("p").show(3000);}else if(animationValue=="4"){//p元素将在1000毫秒内慢慢显示出来，//显示完成后，执行函数，提示“显示完毕”$("p").show(1000,function(){alert("显示完毕");});}else if(animationValue=="5"){//p元素将在1000毫秒内以匀速的速度//慢慢显示出来$("p").show(1000,"linear");}else if(animationValue=="6"){//指定p元素在1000毫秒内显示出来$("p").show( { duration: 1000 } );}});});2、hide()（1）、该函数用于隐藏所有匹配的元素。

此外，你还可以指定元素隐藏的过渡动画效果。

如果元素本身是不可见的，则不对其作任何改变。

如果元素是可见的，则将其隐藏。

与该函数相对的是show()函数，用于显示所有匹配的元素。

（2）、如果没有为hide()指定任何参数，则将以最快方式直接隐藏元素，不使用动画效果。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery动画效果之hide</title><script type="text/javascript" src="../js/jquery-1.12.4.js"></script> </head><body><p>CodePlayer</p><p>专注于编程开发技术分享</p>显示效果：<select id="animation"><option value="1">hide( )</option><option value="2">hide( "slow" )</option><option value="3">hide( 3000 )</option><option value="4">hide( 1000, complete )</option><option value="5">hide( 1000, "linear" )</option><option value="6">hide( { duration: 1000 } )</option></select><input id="btnShow" type="button" value="显示" /><input id="btnHide" type="button" value="隐藏" /></body></html>$(function(){//给显示按钮添加单击事件，点击时，显示p元素$("#btnShow").click(function(){//显示匹配的p元素$("p").show();});//给隐藏按钮添加单击事件，点击时，隐藏p元素$("#btnHide").click(function(){//获取下拉框选中项的值var animationValue=$("#animation").val();//根据不同的值，执行相应的动画效果if(animationValue=="1"){//以最快的方式隐藏p元素，不使用动画效果$("p").hide();}else if(animationValue=="2"){//p元素将在600毫秒内慢慢隐藏起来$("p").hide("slow");}else if(animationValue=="3"){//p元素将在3000毫秒内慢慢隐藏起来$("p").hide(3000);}else if(animationValue=="4"){//p元素将在1000毫秒内慢慢隐藏起来，//隐藏完成后，执行函数，提示“隐藏完毕”$("p").hide(1000,function(){alert("隐藏完毕");});}else if(animationValue=="5"){//p元素将在1000毫秒内以匀速的速度//慢慢隐藏起来$("p").hide(1000,"linear");}else if(animationValue=="6"){//指定p元素在1000毫秒内隐藏起来$("p").hide( { duration: 1000 } );}});});3、toggle()（1）、该函数用于切换所有匹配的元素。

此外，你还可以指定元素切换的过渡动画效果。

所谓"切换"，也就是如果元素当前是可见的，则将其隐藏；如果元素当前是隐藏的，则使其显示(可见)。

合集下载

jQuery学习笔记

jQuery学习笔记

第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。

如何通过jQuery实现网页动态效果

如何通过jQuery实现网页动态效果

如何通过jQuery实现网页动态效果jQuery 是一种流行的 JavaScript 库，被广泛用于开发网页动态效果。

它简化了 JavaScript 的操作，并提供了丰富的功能和方法，以帮助开发者创建出色的用户体验。

本文将介绍如何利用 jQuery 实现网页动态效果，主要分为以下几个方面：第一章：引入 jQuery首先，在网页中引入 jQuery 库，可以通过下载库文件并将其链接到项目中，或者使用 CDN（内容分发网络），如 Google CDN 或微软 CDN，更快加载 jQuery。

然后，在 HTML 页面的 `<head>` 或 `<body>` 部分内添加 `<script>` 标签，并指定加载的文件路径或 CDN 链接。

第二章：基础操作在这一章节中，我们将学习一些 jQuery 的基础操作。

首先，通过选择器选择 HTML 元素，并使用 jQuery 提供的方法对其进行操作。

例如，使用 `$()` 来选择元素，并使用 `.css()` 方法修改元素的样式。

此外，还可以使用 `.hide()`、`.show()` 和 `.toggle()` 方法来控制元素的隐藏、显示和切换。

第三章：事件处理jQuery 提供了丰富的事件处理方法，用于实现交互效果。

可以使用 `.click()` 方法为元素添加点击事件处理函数，使用 `.hover()`方法添加鼠标悬停事件处理函数，以及使用 `.keydown()` 方法添加键盘按下事件处理函数。

通过这些方法，可以实现网页的互动功能，如点击按钮显示弹出窗口、鼠标悬停时改变元素样式等。

第四章：动画效果动画效果是网页中常见的动态效果之一，通过使用 jQuery 的动画方法，可以轻松实现各种动画效果。

例如，使用 `.animate()` 方法可以实现元素的平滑移动、渐变、放大缩小等效果。

可以设置动画的持续时间、缓动效果以及回调函数等，以实现更加自然和炫目的效果。

jquery实现动画效果（各种方法）

jquery实现动画效果（各种方法）

jquery实现动画效果（各种⽅法）1.show()和hide()和toggle()(这是show和hide的⼀个综合，⼀个按钮就实现显⽰和隐藏)效果：代码：<button type="button" class="show">普通show</button><button type="button" class="show1">⼀秒show</button><button type="button" class="hidden">普通hidden</button><button type="button" class="hidden1">⼀秒hidden</button><div id="box" style="width: 100px;height: 100px;background-color: red;"></div><script type="text/javascript">$(".show").click(function () {$("#box").show();})$(".show1").click(function () {$("#box").show(1000);})$(".hidden").click(function () {$("#box").hide();})$(".hidden1").click(function () {$("#box").hide(1000);}) //还可以添加slow（200）,fast（600）,normal（400）三个参数，默认是400毫秒</script>实现列队动画：效果：代码：<style>div{background: red;color: #fff;margin-left: 5px;float: left;display: none;}</style><div>你</div><div>好</div><div>吗</div><div>？</div><button type="button" class="show">显⽰列队动画</button><button type="button" class="hide">隐藏列队动画</button><script type="text/javascript">$(".show").click(function () {//列队动画，递归⾃调⽤$("div").first().show("fast",function testShow() {$(this).next().show("fast",testShow);})})$(".hide").click(function () {//列队动画，递归⾃调⽤$("div").last().hide("fast",function testShow() {$(this).prev().hide("fast",testShow);})})</script>2.滑动效果：包括slideUp()和slide()down和slideToggle()和上⾯实现⽅式⼀样的，效果呈现滑动效果3.淡⼊淡出：包括fadeIn()和fadeOut()和fadeToggle()和上⾯实现⽅式也是⼀样的，效果呈现淡⼊淡出但还有⼀个fadeTo('fast',0.3) 0.3是透明度。

第14章jQuery的动画效果

第14章jQuery的动画效果

3
显示元素的show(方法
show()方法的功能与hide()方法正好相反，其功能是如果被选元素已被隐 藏，则显示这些元素。其基本语法格式如下： $(selector).show(speed,callback) 其参数的含义与hide()方法中参数的含义完全相同。
4
交替显示隐藏元素
jQuery中提供的toggle()方法可以实现交替显示和隐藏元素的功能，即自 动切换hide()和show()方法。该方法将检查每个元素是否可见。如果元素 已隐藏，则运行 show()方法。如果元素可见，则运行hide()方法，从而实 现交替显示隐藏元素的效果。该方法的基本语法格式如下： $(selector).toggle(speed,callback) 其参数的含义与hide()方法中参数的含义完全相同。
6
向下展开效果
jQuery中提供了slideDown()方法用于向下滑动元素，该方法通过使用滑 动效果，将逐渐显示隐藏的被选元素。该方法实现的效果适用于通过 jQuery隐藏的元素，或在CSS中声明“display:none”的元素。该方法的 基本语法格式如下： $(selector).slideDown(speed,callback) 其参数的含义与slideUp()方法中参数的含义完全相同。
13
动画队列
queue()方法的基本语法格式如下： $(selector).queue(name,[callback]) 其中，参数name为必选项，当只传入该参数时，方法将返回并指向第一个匹配元 素的队列(将是一个函数数组，队列名默认是fx，参数callback是可选项，该参数又 分两种情况，当该参数是一个函数时，它将在匹配的元素的队列最后添加一个函数。 当该参数是一个函数数组时，它将匹配元素的队列用新的一个队列来代替（函数数 组）。 de queue()方法的基本语法格式如下： $(selector).dequeue(queueName) 该方法的基本功能就是从队列最前端移除一个队列函数, 并执行它。其中，参数 queueName是可选的，表示函数序列的名称，其默认值是fx。 页面中每个元素均可拥有一到多个由jQuery添加的函数队列。在大多数元素中，只 使用一个队列（名为fx）。队列运行在元素上异步地调用动作序列，而不会终止程 序执行。典型例子是调用元素上的多个动画方法。例如： $('#foo').slideUp().fadeIn(); 当这条语句执行时，元素会立即开始其滑动动画，这时执行淡入效果的方法被置于 fx队列，只有当滑动效果方法完成后才会被调用。 而queue()方法允许直接对这个函数队列进行操作。可以新建一个数组，把动画函 数依次放进去，这样更改动画顺序,新加动画效果都非常方便。然后调用queue()方 法将这组动画函数数组加入到队列中，利用dequeue()方法取出函数队列中第一个14 函数，并执行它，从而完成连续动画执行的效果。