首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery动画效果学习笔记（8种效果）

Posted in Javascript onNovember 13, 2015

1、元素的显示和隐藏

  • display:none; 隐藏
  • display:block; 显示

简单显示和隐藏方法

  • a) show() 显示
  • b) hide() 隐藏
  • c) toggle() 开关，显示则隐藏，隐藏则显示
<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。
具体说明如下：

  • visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
  • display 隐藏后，隐藏的元素不再占用文档的位置。

2、滑动效果显示和隐藏

  • slideUp(speed[,callback]) 向上滑动元素并最终隐藏
  • slideDown(speed[,callback]) 向下滑动元素并最终显示
  • slideToggle(speed[,callback])

                     speed：设置效果的速度(slow（600）normal（400） fast（200） 时间(毫秒))
                     callback: 效果执行完毕之后自动调用的回调函数

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

3、淡入淡出效果

让元素通过一定透明度变化，达到显示和隐藏的效果

  • fadeIn(speed, [callback])
  • fadeOut(speed, [callback])
  • fadeToggle(speed, [callback])开关效果
  • fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度
<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

设置透明度，div的透明度是30%：

4、动画效果底层方法animate()

show() hide() 等等动画效果内部都是执行animate()方法

$().animate(css效果参数[，时间][，回调函数]);

css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。

<script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="设置" onclick="f1()" />
</body>

5、累加累减动画

如果动画一次设定left：500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

6、多重动画

1、同时执行多个动画
上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

2、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

3、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这
些效果后让它以淡出的方式隐藏掉。

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

7、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

这样就把css方法加入到动画队列中了。

8、停止动画和判断是否处于动画状态

1、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型
参数说明：

clearQueue：代表是否清空未执行完的动画队列
gotoEnd ：代表是否将正在执行的动画跳到末状态
通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯??难劬Γ?窖返牧????嗡韭砩钌畹幕? 
    </div> 
  </div> 
</body> 
</html>

2、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。
用法：

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

通过本文对8种jquery动画效果的详细剖析，玩转jquery动画效果，希望大家喜欢这篇针对jquery动画效果进行全面介绍的文章。

jquery动画效果学习笔记（8种效果）

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
从零开始学习Node.js系列教程四：多页面实现的数学运算示例
Apr 13 Javascript
node.js中路由，中间件，ge请求和post请求的参数详解
Dec 26 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
React实现全选功能
Aug 25 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 #Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 #Javascript
每天一篇javascript学习小结（Date对象）
Nov 13 #Javascript
有关Promises异步问题详解
Nov 13 #Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 #Javascript
Jquery promise实现一张一张加载图片
Nov 13 #Javascript
jquery转盘抽奖功能实现
Nov 13 #Javascript
DE1102(1) ICOM(2) SONY600GR(1) 胆机(1) WR-800F(1) R71E(1) DE1107(3) R9700(1) DE1105(1) DE1103(2)
You might like
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php中opendir函数用法实例
2014/11/15 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Cookbook组件形式：优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python 异常处理的实例详解
2017/09/11 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
意大利领先的线上奢侈品销售电商：Eleonora Bonucci
2017/10/17 全球购物
俄罗斯建筑和装饰材料在线商店：Stroilandia
2020/07/25 全球购物
PHP开发的一般流程
2013/08/13 面试题
Java中有几种类型的流？JDK为每种类型的流提供了一些抽象类以供继承，请说出他们分别是哪些类？
2012/05/30 面试题
护士的自我鉴定
2014/02/07 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
初中生毕业评语
2014/12/29 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
小学生手册家长意见
2015/06/03 职场文书
准备去美国留学，那么大学申请文书应该怎么写？
2019/08/12 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js