jquery中的动画

自带动画函数

show()方法和hide()方法

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

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

Tip：

  1. 使用该方法时，元素的宽度/高度/透明度是同一时候变化的。
  2. 能够给该方法传递參数”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函数就是在动画队列中的第三个动画运行结束之后，再运行的。

时间： 2024-10-10 08:28:31

jquery中的动画的相关文章

前端编程提高之旅（十六）————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

jQuery中停止动画stop

jQuery中停止动画stop 动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止 语法: .stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] ) stop还有几个可选的参数,简单来说可以这3种情况 .stop(); 停止当前动画,点击在暂停处继续开始 .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

第五章 jQuery中的动画

http://www.cnblogs.com/shuibing/p/4080543.html 通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show()方法和hide()方法设置参数能有动画效果.例如 show(600);来设置时长600毫秒,同时改变元素的高度,宽度和不透明度. <!DOCTYPE html PUBLIC "-//W3C//DTD

JQuery中的动画效果

JQUERY DAY03: * 动画效果 * 显示与隐藏 * show() - 显示 * 无参版本 - 不具有动画效果 * show(speed,callback)有参版本 - 具有动画效果 * speed - 设置动画执行的时长,单位为毫秒 * 三个预定义值 - slow|normal|fast * callback - 当动画执行完毕后执行的函数 * hide() - 隐藏 * 无参版本 - 不具有动画效果 * hide(speed,callback)有参版本 - 具有动画效果 * spee

jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  (显示和隐藏) show() 方法和hide() 方法是jQuery中基本的动画方法.在HTML文档里,为一个元素调用hide() 方法,会将该元素的display样式改为“none”. $("element").hide(); //通过hide()方法将element元素隐藏 $("element").css("display","none"); //通过css()方法将elem

五、jQuery中的动画

通过jQuery的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验. 一.show()方法和hide()方法 1.show()方法和hide()方法 show()方法和hide()方法是jQuery中最基本的动画方法.在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为none. 隐藏元素: $("element").hide();  //通过hide()方法隐藏元素 也可以通过css方法设置display属性 $("el

jquery学习（六）-jquery中的动画

参考锋利的jQuery第二版 1.show和hide方法 调用方法:element.hide()隐藏元素,element.show()显示元素.其实说白了,其原理就是将元素的样式display值设置为none或block. 若想让元素慢慢隐藏或显示,可以为其添加一个速度的参数,如element.show(500),表示元素会在500毫秒内慢慢显示出来. 2.fadeIn和fadeOut方法 fadeIn和fadeOut分别是实现元素淡入和淡出的方法.其原理是通过一段时间内改变元素的不透明度(op