网站首页 极客学院 视频课堂 极客论坛 下载专区 行业新闻 欢迎光临极客研究院,今天是2019-08-24 星期六
会员面板
帐号:
密码:
验证码:
极客学院
教程搜索
输入要搜索的内容:

下载专区
精品教程

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>

函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
  相关文章
本文标题:Jquery切换效果
对本文有疑问?现在就进入论坛提问>>
 
粤ICP备18090445号