jQuery动画效果

       如果说使用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>

jQuery动画效果_第1张图片


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>

jQuery动画效果_第2张图片


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>

jQuery动画效果_第3张图片























你可能感兴趣的:(jquery)