jquery中的动画

浏览数：38 / 时间：2015年06月09日

自带动画函数

show()方法和hide()方法

调用show()函数会将该元素的display属性设置为none，将元素隐藏

调用hide()函数会将该元素的display样式设置为原来的值，将元素又一次显示

Tip：

使用该方法时，元素的宽度/高度/透明度是同一时候变化的。
能够给该方法传递參数”fast”,”normal”,”slow”,或着之间填数字（单位是毫秒）控制元素消失/出现的速度。

演示样例程序：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    background-color:red;
    width: 300px;
  }
  .two{
    background-color: green;
    width: 300px;
    display: none;
  }
  .three{
    background-color:yellow;
    width: 300px;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<div class="two">
  您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
</div>
<div class="three">
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
</div>
<script type="text/javascript">
  $("div.one").bind("mouseover",function(){
    $(this).next("div.two").show("slow");
  });
  $("div.one").bind("mouseout",function(){
    $(this).next("div.two").hide("slow");
  })
</script>
</body>
</html>

fadeIn()和fadeOut()方法

fadeIn()表示淡入，fadeOut()表示淡出。该函数通过控制元素的透明度来控制元素的隐藏和出现。相同能够通过传递參数的方法控制其速度。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    background-color:red;
    width: 300px;
  }
  .two{
    background-color: green;
    width: 300px;
    display: none;
  }
  .three{
    background-color:yellow;
    width: 300px;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<div class="two">
  您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
</div>
<div class="three">
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
</div>
<script type="text/javascript">
  $("div.one").bind("mouseover",function(){
    $(this).next("div.two").fadeIn("slow");
  });
  $("div.one").bind("mouseout",function(){
    $(this).next("div.two").fadeOut("slow");
  })
</script>
</body>
</html>

slideDown()和slideUP()方法

slideDown()表示元素从上到下滑下出现，slideUp()表示元素从下到上滑上消失，非常像我们生活中遇到的卷帘。该函数是通过控制元素的高度来实现的元素的消失和出现。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    background-color:red;
    width: 300px;
  }
  .two{
    background-color: green;
    width: 300px;
    display: none;
  }
  .three{
    background-color:yellow;
    width: 300px;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<div class="two">
  您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
    您已经建立了宽带上网的连接。
  假设您想继续使用宽带上网的功能，请不要关闭本窗体.
  假设您想断开连接，请单击<下线>button。
</div>
<div class="three">
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
  本时钟仅供參考，不作为计费根据。
</div>
<script type="text/javascript">
  $("div.one").bind("mouseover",function(){
    $(this).next("div.two").slideDown("slow");
  });
  $("div.one").bind("mouseout",function(){
    $(this).next("div.two").slideUp("slow");
  })
</script>
</body>
</html>

自己定义动画函数

animate(paras , speed , callback);

这三个參数各自是：包括目标样式属性的映射，速度參数（可选），在动画完毕时运行的动作（可选）

自己定义简单动画：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    position: relative;
    width: 300px;
    height: 300px;
    background-color:red;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<script type="text/javascript">
  $("div.one").click(function(){
    $(this).animate({left:($(document.body).width()-$(this).width())},3000);
  });
</script>
</body>
</html>

上面的代码演示的是：当用户点击div以后，该div就会从页面的左边移动到右边。

同一时候运行多个动画：

事实上就是在第一个參数设置不止一个属性，让元素的多个属性同一时候变化。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    position: relative;
    width: 300px;
    height: 300px;
    background-color:red;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<script type="text/javascript">
  $("div.one").click(function(){
    $(this).animate({left:($(document.body).width()-$(this).width())},3000)
           .animate({height:"500px"},3000)
           .animate({opacity:"0.5"},3000);
  });
</script>
</body>
</html>

上面的代码演示结果与上一个样例的终于结果是一样的，可是div的位置，高度，透明度三个属性的变化不是同一时候发生，而是依次变化的，而且每个动作都耗时3000毫秒，一共用时9000毫秒。

动画回调函数：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
  .one{
    position: relative;
    width: 300px;
    height: 300px;
    background-color:red;
    cursor: pointer;
  }
  .two{
    font-size: 30px;
    color: green;
    text-decoration: underline;
  }
</style>
</head>
<body>
<div class="one">
  网上支付入口连接
</div>
<script type="text/javascript">
  function fun(){
    var $content = $("<ul><li>test one</li><li>test two</li><li>test three</li></ul>");
    var $target = $("div.one");
    $target.append($content).addClass("two");
  } 
  $("div.one").click(function(){
    $(this).animate({left:($(document.body).width()-$(this).width())},3000)
           .animate({height:"500px"},3000)
           .animate({opacity:"0.5"},3000,function(){
            fun();
           });
  });
</script>
</body>
</html>

动画回掉函数的作用是将函数插入动画队列，而不是在动画的一開始就运行。

上面代码中的fun函数就是在动画队列中的第三个动画运行结束之后，再运行的。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery中的动画