jQuery动画效果

来源：互联网发布：系统编程编辑：程序博客网时间：2024/05/29 16:25

如果说使用jQuery时，对元素的操作更加突出，那么在JavaScript世界中，效果则会让操作更上一层楼。通过jQuery我们不仅可以轻松地为页面操作添加简单的视觉效果，甚至能创建更精致的动画。

本文向大家介绍如下动画效果：

1、上下滑动式动画效果
toggle() 方法切换元素的可见状态。
slideDown()高度从0开始变成有高度，画面的显示是由上展开出来，height 的数值会渐变。
slideUp()高度从有变成0，画面的隐藏是由下往上消失，height的数值会渐变。
2、淡入式动画效果：
逐渐增加透明度，fadeIn（）;
3、淡出式动画效果：
逐渐减少不透明度，fadeOut();

----------------------------------------------------

toggle（切换显示隐藏）

<script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script></head><body><div id="div1" style="width:200px; height:100px; background-color:#999999; display:none"></div><!--<div id="div2" style="width:200px; height:100px; background-color:#000099; display:none"></div>--><input type="button" value="点击" onclick="f1()" /></body><script>function f1(){   $("#div1").toggle(1000);   // $("#div1").hide();  // $("#div1").slideDown(1000);  // $("#div1").slideUp(1000);      // $("#div2").slideDown(1000);  // $("#div1").slideUp(1000);  // $("#div1").fadeIn(2000).fadeOut(2000);}</script></html>

slideDown()：由上向下展示出来，原先为隐藏

slideUp()：由下向上隐藏，原先为显示

<body><div id="div1" style="width:200px; height:100px; background-color:#999999; display:none"></div><!--<div id="div2" style="width:200px; height:100px; background-color:#000099; display:none"></div>--><input type="button" value="点击" onclick="f1()" /></body><script>function f1(){  //  $("#div1").toggle(1000);   $("#div1").hide();  $("#div1").slideDown(2000);  $("#div1").slideUp(2000);      // $("#div2").slideDown(1000);  // $("#div1").slideUp(1000);  // $("#div1").fadeIn(2000).fadeOut(2000);}</script></html>

slideDown()、slideUp()组合，推拉窗：

<body><div id="div1" style="width:200px; height:100px; background-color:#999999; "></div><div id="div2" style="width:200px; height:100px; background-color:#000099; display:none"></div><input type="button" value="点击" onclick="f1()" /></body><script>function f1(){  //  $("#div1").toggle(1000);  /* $("#div1").hide();  $("#div1").slideDown(2000);  $("#div1").slideUp(2000); */      $("#div2").slideDown(1000);   $("#div1").slideUp(1000);  // $("#div1").fadeIn(2000).fadeOut(2000);}</script>

fadein()、fadeout()淡入淡出效果

<body><div id="div1" style="width:200px; height:100px; background-color:#999999; display:none"></div><!--<div id="div2" style="width:200px; height:100px; background-color:#000099; display:none"></div>--><input type="button" value="点击" onclick="f1()" /></body><script>function f1(){  //  $("#div1").toggle(1000);  /* $("#div1").hide();  $("#div1").slideDown(2000);  $("#div1").slideUp(2000); */     // $("#div2").slideDown(1000);  // $("#div1").slideUp(1000);  $("#div1").fadeIn(2000).fadeOut(2000);}</script>

3 0