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动画效果进行全面介绍的文章。

Javascript 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
You might like
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
深入分析PHP设计模式
2020/06/15 PHP
JavaScript中的类继承
2010/11/25 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python如何实现线程间通信
2020/07/30 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
自荐信如何制作?
2014/02/21 职场文书
投资入股协议书
2016/03/22 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
MySQL系列之三 基础篇
2021/07/02 MySQL
24年收藏2000多部退役军用电台
2022/02/18 无线电