work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2012-01-01 22:00  work hard work smart  阅读(44794)  评论(0)  编辑  收藏  举报

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() 对被选元素执行自定义动画