JQuery 淡出、 动画、显示/隐藏切换等效果

简介:

1、jQuery slideToggle() 表示简单的 slide panel 效果。

< html >
< head >
< script  type="text/javascript" src="jquery-1.7.1.min.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:70px;
display:none;
}
</ style >
</ head >
  
< body >
  < p  class="flip">请点击这里</ p >
  < br />
  < br />
< div  class="panel"  style="width:200px">
< p >JQuery</ p >
< p >爱,别太认真</ p >
</ div >

 

2、jQuery fadeTo()表示简单的淡出效果。

< html >
< head >
< script  type="text/javascript" src="jquery-1.7.1.min.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 >

 

 

3、jQuery animate() 动画效果

< html >
< head >
< script  type="text/javascript" src="jquery-1.7.1.min.js"></ script >
< script  type="text/javascript">
$(document).ready(function(){
   $("#start").click(function(){
   $("#box").animate({height:500},"slow");
   $("#box").animate({width:500},"slow");
   $("#box").animate({height:150},"slow");
   $("#box").animate({width:150},"slow");
   });
});
</ script >
</ head >
< body >
< p >< a  href="#" id="start">Start Animation</ a ></ p >
< div  id="box"
style="background:red;height:150px;width:150px;position:relative">
</ div >
 
</ body >
</ html >

 4、显示/隐藏切换效果 $("p").toggle();

html>
< head >
< script  type="text/javascript" src="jquery-1.7.1.min.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 >

 5、jQuery 效果

函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/archive/2012/01/01/2309645.html,如需转载请自行联系原作者

目录
相关文章
N..
|
18天前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
10 1
|
23天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
11 0
|
3月前
|
机器学习/深度学习 JavaScript
|
7月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
43 0
|
7月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
47 0
|
7月前
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
57 0
|
7月前
|
JavaScript
jQuery stop() 停止动画(详细使用)
jQuery stop() 停止动画(详细使用)
42 0
|
7月前
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
39 0
|
7月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
41 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
39 1