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中定义函数的三种方法
Mar 12 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
You might like
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python aiohttp的使用详解
2019/06/20 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
客户代表自我评价范例
2013/09/24 职场文书
师范生教师实习自我鉴定
2013/09/27 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
十佳党员事迹材料
2014/08/28 职场文书
离职证明标准格式
2014/09/15 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书