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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
javascript实现yield的方法
Nov 06 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
Element Notification通知的实现示例
Jul 27 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统计数组元素个数的方法
2015/07/02 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Javascript - HTML的request类
2007/01/09 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
深入了解python列表(LIST)
2020/06/08 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
美容院合作经营协议书
2014/10/10 职场文书
食品质检员岗位职责
2015/04/08 职场文书
未婚证明格式
2015/06/15 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android