[学习笔记]利用Jquery实现一些动态效果

一、Hide() 和 Show() 
1.Jquery可以使用hide()和show()方法实现html元素的隐藏和显示
实例如下：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 
 
 
 
 

如果点击“隐藏”按钮，我就会消失。

 
隐藏 
显示 
 

2.toggle()方法可以切换hide()和show()方法，显示被隐藏的，隐藏已显示的
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 
 
 
 
 
 
切换 

这是一个段落。

 

这是另一个段落。

 
 
 

二、FadeIn() 和 FadeOut()实现淡入淡出
1.FadeIn()方法用于淡入已经隐藏的元素,fadeIn()中的参数可以是："slow","fast"或者毫秒
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 
 
 
 

 

演示带有不同参数的 fadeIn() 方法。

 
点击这里，使三个矩形淡入 


 

 

 

 

 

 
 
 
2.FadeOut()方法淡出可见元素，参数取值同上
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 
3.fadeToggle()方法：如果元素已淡入，则此方法添加淡出效果，如果元素已淡出，此方法添加淡入效果，参数同上
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 

三、SlideUp()和SlideDown()
1.slideUp()顾名思义是向上滑动的意思，参数："slow","fast"或者毫秒
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
 

2.slideDown()向下滑动
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#flip").click(function(){ 
$("#panel").slideDown(); 
}); 

3.slideToggle()方法可以在slideUp()和slideDown之间切换
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("#flip").click(function(){ 
$("#panel").slideToggle(); 
}); 

四、animate()
JQuery animate()方法用于创建自定义的动画，可以对left，top值设定一定时间的变化，达到动画效果
实例：
[html] view plain copy print?在CODE上查看代码片派生到我的代码片
$("button").click(function(){ 
$("div").animate({left:'250px'}); 
}); 

这些效果的实现非常简单，提高了界面的动态功能，更灵活方便。