欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

我的ASP.NET学习笔记07JQuery基础知识

程序员文章站 2022-06-21 10:26:07
JQuery_1_选择器 什么是JQuery JQuery实际上就是一个javascript文件,它是一堆由javascript写好的工具程序,一个被封装好的js工具库。它在js基础之上做了很多的优化,让网页脚本的编写过程更加的便捷高效。 JQuery有很多的版本,但各版本之间的差异都不是太大,基础 ......

JQuery_1_选择器

什么是JQuery

JQuery实际上就是一个javascript文件,它是一堆由javascript写好的工具程序,一个被封装好的js工具库。它在js基础之上做了很多的优化,让网页脚本的编写过程更加的便捷高效。

JQuery有很多的版本,但各版本之间的差异都不是太大,基础语法的通用。

 

如何使用JQuery

1、首先,我们必须下载或复制JQuery的库文件,也就是文件名”jquery-版本号[.min].js的脚本文件,(其中包含min的是没有换行、制表符和空格的压缩版本)。

2、在网页中引用JQuery文件:

<script type="text/javascript" src= "js/jquery-1.7.1.min.js" > </script>

 

 

选择器

选择器的意义,就是确定代码执行的对象,就是确定代码执行的目标对象。

选择器的基本格式

$符号代表选择器,它的作用类似于javascript如下指令:

document.getElementByID

document.getElementsByClassName

document.getElementsByTagName

 

语法:

$(表达式)

表达式可以是一个字符串,也可以是一个变量或html代码。

注意:JQuery语句通常都是以$开头的。

$(document)

获取当前网页的文档对象。

$(document.body)代表网页的<body>部分

$(document.body).css({"background-color":"green"});

 

 

HTML标签选择器

就是在选择器的表达式中直接使用html标签名,示例:

<p>天气凉了</p>

<div id="box1">魂牵梦萦</div>

<div id="box2">朝秦暮楚

<p>注意添衣</p>

</div>

 

//$("p").css({"font-size":"88px"});

$("div p").css({"font-size":"88px"});

 

选择器的find()方法

意思是在选择器选定的集合之中,再次进行二次筛选,在选择器选定的结果里,再次按条件进行查找。

$(document).find("div p").css({"font-size":"88px"});

//在网页正文中寻找第一个div里的p标签。

 

 

ID选择器

$("#box1").css({"font-size":"88px"});

 

在选择器的表达式中用#以及其后的ID名称来获取这个ID所指向的元素对象。

Class样式类选择器

$(".style1").css(

{

"font-size":"38px",

"background-color":"yellow"

}

);

针对所有class属性为.style1的元素。

css之中包含的实际上是一个JSON对象。

$(“*”)
选择所有元素

$("*").css({

"font-size":"38px",

"background-color":"orange"

});

 

 

小练习

将一个span中的div通过jquerycss方法,设置其样式为高200像素宽300像素背景为兰色字体为40px

 

并列选择:

$("#box1,.style1").css({

"font-size":"38px",

"background-color":"orange"

});

 

在表达式中,用逗号来分隔多个选择器。

父子层级关系选择

按照元素之间的包含关系来进行选择,父与子元素用空格或>来分割。

$("#box2>p").css({

"font-size":"38px",

"background-color":"orange"

});

 

相邻选择器

选择下一个元素

jquery匹配选择器的时候,会首先找到+左边的元素,然后从该元素开始向后查找+右边的元素,直到找到第一个符合的元素为止。

$(“#box1+div”) //查找box1后面的第一个div

$(".style1+p") //注意:包含层级必须是同一级别的才可以

 

选择之后所有匹配的元素

$(".style1~p")

 

首先找到~左边的元素,然后从该元素开始向后查找~右边的元素,找到所有符合条件的元素为止。

选择符合条件的第一个/最后一个元素

$("p:first")

$("p:last")

 

在选择结果中排除

$("p:not(.style1)").css({"background-color":"orange"});

//在<p>中排除样式类名为style1的元素。

 

选择查询结果中的排列次序为偶数/奇数的元素

$("p:even").css({"background-color":"orange"});

//选择偶数次序的元素

$("p:odd").css({"background-color":"#aaa"});

//选择奇数次序的元素

 

选择指定次序的元素

$("p:eq(0)").css({"background-color":"orange"});

//选择页面上的第一个<p>段落(第一个元素的序号为0)

 

选择大于/小于指定序号的元素

$("p:lt(3)").css({"background-color":"orange"});

//结果集的第3个元素之前的所有元素

$("p:gt(3)").css({"background-color":"orange"});

//结果集的第3个元素之后的所有元素

 

选择包含指定文本的元素

$("p:contains('Hello')").css({"background-color":"orange"});

//在结果集中查找包含了指定内容的元素。

 

选择不包含任何子元素或内容的标签

$("p:empty").css({"background-color":"orange","height":"30px"});

//在选择器的查找结果中筛选内部为空的元素

 

包含指定的子元素的父元素

$("div:has('.style1')")

 

在所有div中查找,包含使用了.style1的子元素的div

选择指定元素的父元素

$(".style1:parent").css({

"background-color":"orange",

"height":"30px"

});

 

选择所有的隐藏元素

$("p:hidden").css({

"background-color":"red",

"display":"block"

});

 

 

小练习:

制作一个显示学生姓名的表格,然后设置奇数行的背景色为淡灰色,偶数行的背景色为憕色,如果单元格中没有内容,背景色为红色。

 

JQurey元素的属性

Html()方法

获取或设置一个容器类元素内部包含的内容,也就是其开始标签与闭合标签中间的内容。

示例:

alert( $("#box1").html()); //获取内容

$("#box1").html("今天<p>星期五</p>"); //修改box1中的内容

 

Text()方法

Html相似,获取元素的内容,但是会对内容中的html标签进行一定的处理。

 

$("#box1").text("今天<p>星期五</p>"); //写入内容时,html元素会被转义,从而不会被浏览作为html标签来解析。

$("#box1").text(); //获取内容时清除掉其中的html

 

小练习:

1、 在网页中加入一个5行以上的表格。用JQuery向表格的第三行写入文字“云深不知处,身在此山中”。

2、 手动在第四行写入“明日复明日,明日何其多。”。然后用JQuery查找包含“明日”的行,将其文本内容改为“雷令风行”。

3、 给表格第一行加入idtr1, 用jquery匹配tr1的下一行,并在写一行写入文本:“山中自有黄金屋”

 

 

通过JQuery操作hmtl元素及其属性

Ready事件

$(document).ready();

通常JQuery的选择器都需要在其指定的HTML元素加载完成之后再来执行,因此我们一般都是在页面全部加载完毕之后再业执行JQuery代码,否则很可能元素还没有被浏览器构建入DOM模型,我们就去提前使用元素,会造成程序错误。

 

ready()事件的意思就是指页面全布加载完毕触发,DOM模型构建完成之后。

它相当于是bodyonload()事件。

语法:

$(document).ready( function(e){

//需要在页面加载之后运行的代码;

} );

 

示例:

<body onload=" $('#box1').text('今天<p>星期五</p>');">

相当于:

<script type="text/javascript">

$(document).ready(function(e) {

    $("#box1").text("今天<p>星期五</p>");

});

</script>

 

注意:

Ready()事件可以包含绝大多数的javascriptjquery代码,但是要注意作用域的问题,在ready()中内部定义的变量和函数,是无法在外部访问到的。

 

JQuery操作html元素

length属性和.size()方法

代表选择器所匹配到的元素的个数。

比如:

$("div").length;

$("div:lt(3)").size(); //第三个元素之前的元素个数

$("div:lt(3)").length;

 

Get( )方法

它类似于$(“div:eq(n)”),作用是在选择器匹配到的元素集合中得到指定次序的元素。

但是它同时有另一个功能,就是将JQuery对象转换为javascript对象。也就是不再支持html()css()这类JQuery方法,而是可以支持innerHTMLstyle这类javascript的系统函数。

示例:

$("div").get(3).innerHTML //得到第四个元素的内容

 

 

each( )方法

它的作用是遍历选择器得到的集合中的每个元素。

each方法的参数

示例:

//each所执行的函数包含两个参数,index代表当前元素在集合中的次序,element代表当前元素对象

    $("div").each(function(index, element) {

        alert(index +"----"+ element.innerHTML);

});

 

 

attr( ) 元素属性集合

获取、设置或添加html元素的属性或属性的集合。

示例:

alert($("#box1").attr("title")) //显示提示内容

$("#img1").attr("src","22.jpg"); //修改图片路径

 

$("#img1").attr(

{

"width":"700",

"height":"550",

"src":"22.jpg"

}

); //同时修改图片的宽、高和路径

 

 

remove()删除元素

清除选择器指定的元素

示例:

alert(1);

$("div:eq(3)").remove();

 

为元素添加css样式类

addClass()将已存在的css样式类添加到指定的html元素上。

示例:

alert(1);

$("div:eq(3)").addClass("boxStyle");

 

 

去除html元素的样式类

removeClass()清除指定元素上已有的样式类。

示例:

alert(1);

$("div:eq(0)").removeClass("boxStyle");

 

 

获取或设置表单元素的值

val()用于获取或设置表单元素的value属性的值。

示例:

alert($("input:eq(1)").val());

$("input:eq(0)").val("明天是星期六");

 

小练习:

1、 在页面上添加5div,并且定义一个数组,这个数组包含5个元素“登黄鹤楼”,“白日依山尽”,“黄河入海流”,“欲穷千里目”,“请上二楼”。用JQueryeach(),遍历页面上的5div,将这个5条诗句分别加入5div中。

2、 定义两个css样式类,一个为背景淡黄色,一个为背景淡绿色,奇数行使用淡黄样式类,偶数行使用淡绿样式类。

3、 css()方法,定义字体:为华文行楷,字号30px

4、 在页面上定义9div,里边输入1-9的数字,用css()addClass()方法将这9div9宫格方式排列,在页面上添加一个文本框和按钮,当我在文本框中输入1-9的数字并按按钮之后,其相应的数字的div就消失不见。

 

DOM文档处理

html元素的内部的末尾添加内容

append()方法,向指定的容器类元素的内部的最后面添加内容。

示例:

alert(1);

    $("div:first").append("快乐");

alert(1);

    $("div:eq(3)").append("<b style='color:red'>快乐</b>");

 

html元素移动到另一个元素的内部的末尾

appendTo()方法,示例:

alert(1);

$("#img1").appendTo("div:eq(1)");

//将图片移动到div内部的最后的位置

 

 

html元素内部的开始位置添加内容

prepend()将字符或html代码添加到指定元素内部的最前方,比如:

$("div:eq(2)").prepend("<input type='text' value='1月1日'  />");

$("div:first").prepend("<img src='img/22.jpg' width='100' />");

 

html元素移动到内部的最开始的位置

prependTo()方法,示例:

alert(1);

$("#img2").prependTo("div:eq(3)");

//将图片移动到第四个div的内部最开始的位置。

 

添加内容到指定的元素之后

after()方法:比如:

$("#img1").after("<select><option>中国</option><option>韩国</option></select>");

 

将元素移动到指定的元素之后

有两种方法可以达到这个效果

$("#img1").after($("div:first"));

$("div:eq(1)").insertAfter($("#img2"));

 

这两种方法都可以让div出现在图片的后面,但是要注意他们的写法和顺序。

移动时这两个方法的参数应该是选择器选中的元素对象。

添加内容到指定元素之前

before()方法,向元素之前添加文本和html代码

示例:

$("div:first").before("<input type='button' value='按钮'  />");

 

移动元素到另一个元素的前面

也是有两种方法:

alert(1);

$("div:first").before($("#img1"));

//将图片移动到div的前面去

alert(1);

$("div:eq(1)").insertBefore($("#img1"));

//将div移动到图片前面去

 

 

为指定的html元素添加一个容器标签将其包裹起来

wrap(),在元素的外层添加一个容器元素。

$("span:first").wrap("<b></b>");

$("span:first").wrap("<font color=\"red\"></font>");

 

wrapAll()对所有匹配的元素外侧添加父级元素

$("div").wrapAll("<font color=\"red\"></font>");

 

清除指定html元素的父级标签

unwrap()方法

$("span:first").unwrap()

 

用新元素或内容替换指定的html元素

replaceWith()

$("div:first").replaceWith("<p>明天星期天呀</p>");

 

替换所有匹配的元素

$("div").replaceWith("<p>明天星期天呀</p>");

 

清除一个元素的内容

empty()清空一个元素开始与结束标签之间的所有内容

$("font:first").empty();

 

清除选择器得到的元素集合中的指定元素

detach()二次查找并删除

$("div").detach(".box2");

 

 

复制一个html元素

clone()方法

$("#img2").clone().appendTo("div:eq(3)");

//将图片复制到div中

$("#img1").clone().prependTo("div:first");

 

小练习:

1、 在不写html的情况,用JQuery构建一个网页的新闻列表,要求至少6行,每一行的p段落都有一个id属性:p1p2。。。p6(要求使用循环来实现)
$(“body”).append(“<p id=p”+i+”></p>”);

2、 p1p6之间的列表中添加新闻的标题。

3、 p1p6之间的列表的最前面添加序号。

4、 p1p6之间的列表的最后面添加日期。

5、 所有p标签外侧用div包裹起来。

6、 定义一个css样式类,宽度700px,居中,字体微软雅黑红色,然后将这个样式类添加到div之上。

7、 将最后一条新闻移动到最上方。

8、 将第二条新闻复制一份到最下方。

 

JQuery中的样式和事件

Jquery控制元素的css样式

css方法

用于获取和设置页面上的元素的样式属性。

获取css样式的值:

alert($("div:first").css("height"));

 

css方法中只有一个传入值时是获取css的值。(widthheighttopleft等等值是包含”px”的字符串)。

修改元素的单个css值:

$("div:first").css("width","500px");

 

css方法中有两个传入参数时:第一个是css属性名,第二个是css属性值。

修改元素的多个样式属性:

    $("div:first").css(

{

"height":"600px",

"width":"500px",

"background-color":"blue"

}

);

 

 

获取或修改一个元素的位置:Offset方法

获取元素的位置

offset获取元素位置的时候,它返回的是一个对象,这个对象包含topleft两个数值属性(单位是像素)示例:

var p = $("div:first").offset();

alert("这个元素的位置是高:"+p.top+"横向距离:"+p.left);

 

 

让元素变为浮动层并改变位置

<p style=" width:50px; height:50px; position:absolute; top:150px; left:250px;"></p>

 

var p = $("p:first").offset({top:400,left:300});

//让一个元素变成浮动层,并且按照指定的top和left位置来移动这个元素。(top和left相对于网页的左上角)

 

 

获取元素相对于父元素的相对位置

position()方法返回一个位置对象,这个对象包含了topleft两个属性。

$(document).ready(function(e) {

//var p = $("div>div").offset();

var p = $("div>div").position();

alert("元素相对于其父元素的位置的纵向是:"+p.top+"横向:"+p.left);

});

 

滚动条相对于页面顶部的位置

scrollTop方法:获取和设置滚动条相对于页面顶部的距离。

示例:

alert($(document).scrollTop()); //获取滚动条目前的位置

$(document).scrollTop(100); //修改滚动条的位置

 

 

height()方法获取或修改一个元素的高度

示例:

$("div>div").height(100); //修改没元素的高度

alert($("div>div").height()); //获取元素的高度

 

width()方法获取或修改一个元素的宽度

示例:

$("div>div").width(200);  //修改没元素的宽度

alert($("div>div").width()); //获取元素的宽度

 

元素内部的高度和宽度

innerWidthinnerHeight

获取元素内部的高度和宽度,内部宽高是指加上padding的高度,而不包括bordermargin的。

<div style="background:#F00; width:50px; height:50px; top:70px; left:30px; border:30px solid green; margin:10px; padding:13px;"></div>

 

alert($("div>div").innerWidth());

 

小练习:

1、 在页面上定义一个宽5050的红色div,让它自动向右上方移动。

2、 接上题,移动到横向500纵向500的时候,再向上移动。

 

3、用css方法设置一个宽600px50px的标题栏,用offset方法设置其浮动位置在页面的顶部,要求当你拖动浮动条的时候,这个标题栏始终在显示区域的最上方。(提示:可以setInterval方法)。

 

JQuery中的事件绑定

页面载入事件

Ready(function(e){   }),当网页内容全部加载到浏览器中,并且完成dom模型构建之后触发的事件。它与<body>onload事件作用一样。

事件绑定函数

Bind函数:把指定的事件,绑定到选择器指定的元素上。

    $("#littleButton").bind(

"click",

function(){

alert("我是一个按钮");

}

 );

 

绑定仅执行一次的事件

One函数:为选择器指定的html元素绑定一个仅会执行一次的事件,之后这个事件就不会再被触发了。

示例:

$("#littleButton").one("click",function(){

alert("今天星期四");

});

 

自动触发指定元素的指定事件

trigger()方法:自动触发执行指定元素上的指定事件,而不需要用户手动操作。

$("#littleButton").trigger("click");

 

取消指定元素上的指定的事件

unbind():取消指定html元素的指定事件的绑定,令其不再生效。(只能取消通过jquery上的bind绑定的事件,html元素上本身的事件无效,比如:onClick

示例:

$("#littleButton").bind("click",function(){

alert(111);

});

$("#littleButton").unbind("click");

 

 

事件委派:给还不存在的元素绑定事件

live()方法

示例:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

alert(1);

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

 

 

解除live方法委派的事件

die()方法示例:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

$(".btn1").die("click");

 

 

为一个html元素的一个事件切换多个动作

toggle():可以为指定的html元素的指定事件绑定多个会依次切换的函数。比如:

$("#littleButton").toggle(

function(){  alert("你好呀,吃了么?") },

function(){  alert("还没吃?") },

function(){  alert("那赶快回家去吃吧!") },

function(){  alert("你妈喊你回家吃饭") }

);

 

 

常用事件

单击Click()

绑定单击事件

$("#littleButton").click(function(){

alert("哎呀");

});

 

自动触发单击事件,而不需要用户手动点击

$("#littleButton").click();

 

双击dblclick()

绑定双击事件

$("#littleButton").dblclick(function(){

alert("哎呀");

});

 

自动触发双击事件,而不需要用户手动点击

$("#littleButton").dblclick();

 

在文本框中选中文字

select()方法,绑定选中文字时所要执行的函数。

示例:

$("#ttBox").select(function(e){

alert("哎呀,我被选中了。");

});

自动触发在文本框中选中文字的事件,并且自动选中文字:

$("#ttBox").select();

 

获取焦点

focus()

鼠标悬停

hover()

失去焦点

blur()

鼠标按下

mousedown()是指鼠标按下还没有抬起时触发,并且其函数可以接收到一个事件参数,这个参数中包含当前鼠标的横坐标与纵坐标,示例:

$("#littleButton").mousedown(function(e){

alert("当前按下的位置是x:"+e.clientX+"---Y:"+e.clientY);

});

 

这里得到的是点击位置相对于整个页面的左上角的位置。

鼠标移出时

mouseout()

它的用法和语法与mousedown一样。

鼠标移动时

mousemove()

它的用法和语法与mousedown一样。

松开抬起鼠标键时

mouseup()

它的用法和语法与mousedown一样。

表单提交事件

submit() 绑定表单提交时要执行的动作。

键盘事件

keydown 按下一个键时

keyup 松开抬起一个键时

keyPress 按下并松开一个键时

示例:

$(document).keydown(function(e){

alert("您刚才按下的是:"+e.keyCode);

});

JQueryjavascript中有差异的事件

scroll()当滚动条滑动时所触发的事件

严格的说应该是浏览器窗口中显示的网页的位置发生改变时。

$(document).scroll(function(){

alert($(document).scrollTop());

});

 

mouseenter()当鼠标进入到元素所占的区域范围内时

mouseover(),在较简单的情况下我们是看不出这两种事件的区别的,但是当在执行一些动画效果或者其他较复杂的情况下,就会发现。mouseenter()事件只会被执行一次,mouseover()事件会在你的鼠标停留在元素之上的过程中一直重复执行。

mouseleave()当鼠标离开一个元素的显示范围时

它与mouseout()类似,但是它需要与mouseenter()搭配在一起使用的,也就是进入元素范围时用mouseenter(),离开元素时用mouseleave

小练习:

1、 bind()向页面上的一个按钮添加鼠标移入事件,移入按钮范围时,按钮文字变成“欢迎光临”,移出按钮文字变成“后会有期”。

2、 toggle()绑定多个函数给一个按钮,就是当你第一次单击这个按钮时,它提示“你为什么要点我”,第二次提示“说了你还点”,第三次提示“你再点一下试试”,第四次提示“好吧,你赢了。”

3、 实现一个做选择题的功能,在页面上有一个P段落和四个单选按钮,当你选择四个单选按钮中的任意一个时,会提示用户是否回答正确。其中的事件绑定必须要用JQuery实现。

4、 设置一个宽600px50px的标题栏,背景色为橙色,用offset方法设置其浮动位置,要求当拖动页面滚动条时,这个标题栏始终位于当前显示区域的最上方(提示:要求使用scroll()事件)

5、 定义一个长度都是50px的红色div,要求在屏幕任意位置点击鼠标时,这个div立刻移动到当前鼠标点击的位置。

 

 

 

JQuery_动作与效果

基本效果

隐藏一个元素

Hide()方法:

语法:

选择器.hide(速度,fn);

示例:

$("#box1").hide(); //直接隐藏没有任何动画

$("#box1").hide(2000); //在2秒之内逐渐向左上角缩小隐藏

//隐藏过程的动画结束之后,执行这个包含alert的函数

$("#box1").hide(2000, function(){

alert("我隐藏起来了,你看不到");

});

 

说明:

速度代表隐藏过程的时间,单位毫秒。

Fn代表隐藏动画结束之后自动执行的函数。

 

显示已经被隐藏的元素

Show()方法

语法:

选择器.show(速度,fn);

说明:

无论是被cssdisplay:none属性隐藏的元素,还是被上面的hide()方法隐藏的对象,都可以使用show()来令其显形。

 

示例:

$("#box1").show();

$("#box1").show(3000);

$("#box1").show(3000,function(){alert("我又回来了")});

 

 

显示或者隐藏一个元素

Toggle

语法:

Toggle(速度,fn)

说明:

如果这个元素是可见的就执行隐藏操作,如果不可见就执行显示操作。

示例:

function hide_show(){

$("#box1").toggle(300,function(){

alert("我来了,又走了");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

<div style="width:400px; display:none;" id="box1">

    <img src="img/aa.jpg" width="400" />

</div>

 

滑动效果

滑动隐藏一个元素

slideUp()方法:

示例:

$("#box1").slideUp(2000,function(){

alert("图像收起来了");

});

 

滑动显示一个元素

slideDown()方法:

示例:

$("#box1").slideDown (2000,function(){

alert("图像拉下来了");

});

 

滑动隐藏或显示一个元素

sildeToggle()方法:

元素可见就滑动隐藏,反之则滑动显示。

function hide_show(){

$("#box1").slideToggle(100,function(){

alert("隐藏则显示,显示则隐藏。");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

 

淡入淡出效果

以淡出效果隐藏一个元素

fadeOut()方法

示例:

$("#box1").fadeOut(3000,function(){

alert("我走了");

});

 

以淡入效果显示一个元素

fadeIn()方法

示例:

$("#box1").fadeIn(3000,function(){

alert("我又来了");

});

 

改变元素的透明度

fadeTo方法()

在指定的时间内以动画的形式修改一个元素的透明度。

语法:

选择器.fadeTo(速度,透明度,fn);

其中:

透明度是一个10之间的小数,代表透明的百分比。

fn是动画完成后执行的代码。

示例:

$("#box1").fadeTo(2000,0.5);

$("#box1").fadeTo(2000,0.5,function(){

alert("变淡了");

});

 

淡入显示或淡出隐藏

fadeToggle()方法

 

动画效果

自定义动画

Animate可以通过多种css属性的逐渐变化来实现动画效果。

语法:

选择器.animate({

“css属性名1” : ”属性值1”,

“css属性名2” : ”属性值2”,

},动画时长);

作用:

让指定的html元素由目前的css属性开始逐渐向指定的css属性变化,其变化过程会形成一个指定时长的动画。

示例1

$("#box2").animate({

"width":"500px",

"height":"300px",

"font-size":"100px",

opacity:0.5 //代表透明度

},2000);

 

示例2:

$("#box2").animate({

"width":"toggle",

"height":"toggle",

opacity:"toggle"

},2000);

 

支持的属性:

Height/width值可以为toggle也在当前属性值与0值之前切换。

Left/right/top/bottom:前提是元素必须是浮动的。

opacity 值可以为toggle,透明度是01之间的一个小数。

停止正在运行的动画

选择器.stop();

如果选择器指定的元素正在执行动画,则立即停止动画的执行。

Delay延迟动画或其他方法的执行。

$("#box2").delay(5000).slideUp(2000);

 

延迟5秒再执行动画

关闭页面上所有动画

$.fx.off=true;

小练习:

 

 
   

1、按照上图制作一个滑动菜单,要求点击标题栏展开其下方的子菜单项,其他菜单栏收起,要求必须有滑动动画效果。按图进行css切图。

 

2、用Animate制作一个你“点不到我”的按钮,也就是鼠标指向其上时,就会随机移动到其他地方。

提示:获取浏览器显示区域的宽度和高度。

document.documentElement.clientWidth;

document.documentElement.clientHeight;

 

 

3、制作一个百度弹出登录框,要求点击登录直接在页面以浮入动画弹出一个浮动的登陆框,而且无论滚动条在什么地方,这个登录框始终在屏幕*,点击X 关闭。

 
   

 

4、如下图所示,产品图片可以自动向左滑动,当鼠标点击左右键时,可以向左右移动一条图的位置。用户不操作时,每5秒向左移动一个图片的位置,

 

 
   

5、下拉菜单效果,当鼠标移动到菜单上时,就滑动显示出下拉菜单,并且当鼠标移动到菜单项上时,文字变绿并向后滑动10px;

 
   

 

6