首页
所有分类
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之事件绑定
Jul 08 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Vue.js：使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JS实现一个简单的日历
Feb 22 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
JS面向对象实现飞机大战
Aug 26 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
人工智能(2) Pyecharts(7) FuzzyWuzzy(1) 图像处理(1) 模糊匹配(1) 模型保存加载(1) PyTorch(1) 井字棋(1) opencv(7) 五子棋(12)
You might like
php递归法读取目录及文件的方法
2015/01/30 PHP
php输入数据统一类实例
2015/02/23 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Django 开发环境配置过程详解
2019/07/18 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python接入支付宝的实例操作
2020/07/20 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
天网面试题
2013/04/07 面试题
写给女朋友的道歉信
2014/01/12 职场文书
车辆转让协议书
2014/04/15 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
2014年党务公开方案
2014/05/08 职场文书
物资采购方案
2014/06/12 职场文书
欢度春节标语
2014/07/01 职场文书
员工生日活动方案
2014/08/24 职场文书
运动会广播稿100字
2014/09/14 职场文书
开业庆典致辞
2015/08/01 职场文书
工程移交协议书
2016/03/24 职场文书
小学生作文写作技巧100例，非常实用！
2019/07/08 职场文书