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

最新推荐文章于 2017-12-09 14:42:00 发布

转载最新推荐文章于 2017-12-09 14:42:00 发布 · 446 阅读

jQuery学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用jQuery实现的各种动画效果，包括slideToggle()用于面板滑动显示和隐藏、fadeTo()实现淡入淡出效果、animate()自定义动画、toggle()进行元素的显示隐藏切换等。并提供了具体的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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