1. jQuery动画效果

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

1.1 显示动画

方式一：

  1. $("div").show();

无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

  1. $('div').show(3000);

通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

  1. $("div").show("slow");

参数可以是：

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

  1. //show(毫秒值，回调函数;
  2. $("div").show(5000,function () {
  3.     alert("动画执行完毕！");
  4. });

动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

1.2 隐藏动画

方式参照上面的show()方法的方式。如下：

  1. $(selector).hide();
  2.  
  3. $(selector).hide(1000); 
  4.  
  5. $(selector).hide("slow");
  6.  
  7. $(selector).hide(1000, function(){});

1.3 显示隐藏案例

1.3.1 实现点击按钮显示盒子，再点击按钮隐藏盒子

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box{
  8.                 width: 200px;
  9.                 height: 200px;
  10.                 background-color: green;
  11.                 border: 1px solid red;
  12.                 display: none;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div id="box">
  18.         </div>
  19.         <button id="btn">隐藏</button>
  20.     </body>
  21.     <script src="jquery-2.1.0.js"></script>
  22.  
  23.     <script type="text/javascript">
  24.  
  25.         //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
  26.         var isShow = true;
  27.         $('#btn').click(function(){
  28.             if(isShow){
  29.                 $('#box').show('slow',function(){
  30.                     $(this).text('盒子出来了');
  31.                     $('#btn').text('显示');
  32.                     isShow = false;
  33.                 })
  34.             }else{
  35.                 $('#box').hide(2000,function(){
  36.                     $(this).text('');
  37.                     $('#btn').text('隐藏');
  38.                     isShow = true;
  39.  
  40.                 })
  41.             }
  42.         })
  43.  
  44.     </script>
  45. </html>

1.3.2 开关式显示隐藏动画

  1. $('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码如下：

  1. $('#btn').click(function(){
  2. 　　$('#box').toggle(3000,function(){
  3.         $(this).text('盒子出来了');
  4.         if ($('#btn').text()=='隐藏') {
  5.             $('#btn').text('显示');
  6.         }else{
  7.             $('#btn').text('隐藏');
  8.         }
  9.     });
  10. })

1.4 滑入和滑出

1.滑入动画效果：（类似于生活中的卷帘门）

  1. $(selector).slideDown(speed, 回调函数);

下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2.滑出动画效果：

  1. $(selector).slideUp(speed, 回调函数);

上拉动画，隐藏元素。

3.滑入滑出切换动画效果：

  1. $(selector).slideToggle(speed, 回调函数);

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             background-color: green;
  12.         }
  13.     </style>
  14.  
  15.     <script src="jquery-2.1.0.js"></script>
  16.     <script>
  17.         $(function () {
  18.             //点击按钮后产生动画
  19.             $("button:eq(0)").click(function () {
  20.  
  21.                 //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
  22.                 $("div").slideDown(2000, function () {
  23.                     alert("动画执行完毕！");
  24.                 });
  25.             })
  26.  
  27.             //滑出动画
  28.             $("button:eq(1)").click(function () {
  29.  
  30.                 //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
  31.                 $("div").slideUp(2000, function () {
  32.                     alert("动画执行完毕！");
  33.                 });
  34.             })
  35.  
  36.             $("button:eq(2)").click(function () {
  37.                 //滑入滑出切换（同样有四种用法）
  38.                 $("div").slideToggle(1000);
  39.             })
  40.  
  41.         })
  42.     </script>
  43. </head>
  44. <body>
  45. <button>滑入</button>
  46. <button>滑出</button>
  47. <button>切换</button>
  48. <div></div>
  49.  
  50. </body>
  51. </html>

1.5 淡入淡出动画

1.淡入动画效果：

  1. $(selector).fadeIn(speed, callback);

让元素以淡淡的进入视线的方式展示出来。

2.淡出动画效果：

  1. $(selector).fadeOut(1000);

让元素以渐渐消失的方式隐藏起来。

3.淡入淡出切换动画效果：

  1. $(selector).fadeToggle('fast', callback);

通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             /*透明度*/
  12.             opacity: 0.5;
  13.             background-color: red;
  14.         }
  15.     </style>
  16.  
  17.     <script src="jquery-2.1.0.js"></script>
  18.     <script>
  19.         $(function () {
  20.             //点击按钮后产生动画
  21.             $("button:eq(0)").click(function () {
  22.  
  23. //                //淡入动画用法1:   fadeIn();   不加参数
  24.                 $("div").fadeIn();
  25.  
  26. //                //淡入动画用法2:   fadeIn(2000);   毫秒值
  27. //                $("div").fadeIn(2000);
  28. //                //通过控制  透明度和display
  29.  
  30.                 //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  31. //                $("div").fadeIn("slow");
  32. //                $("div").fadeIn("fast");
  33. //                $("div").fadeIn("normal");
  34.  
  35.                 //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
  36. //                $("div").fadeIn(5000,function () {
  37. //                    alert("动画执行完毕！");
  38. //                });
  39.             })
  40.  
  41.             //滑出动画
  42.             $("button:eq(1)").click(function () {
  43. //                //滑出动画用法1:   fadeOut();   不加参数
  44.                $("div").fadeOut();
  45.  
  46. //                //滑出动画用法2:   fadeOut(2000);   毫秒值
  47. //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
  48. //                //通过控制  透明度和display
  49.  
  50.                 //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  51. //                $("div").fadeOut("slow");
  52. //                $("div").fadeOut("fast");
  53. //                $("div").fadeOut("normal");
  54.  
  55.                 //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
  56. //                $("div").fadeOut(2000,function () {
  57. //                    alert("动画执行完毕！");
  58. //                });
  59.             })
  60.  
  61.             $("button:eq(2)").click(function () {
  62.                 //滑入滑出切换
  63.                 //同样有四种用法
  64.                 $("div").fadeToggle(1000);
  65.             })
  66.  
  67.             $("button:eq(3)").click(function () {
  68.                 //改透明度
  69.                 //同样有四种用法
  70.                 $("div").fadeTo(1000, 0.5, function () {
  71.                     alert(1);
  72.                 });
  73.             })
  74.         })
  75.     </script>
  76. </head>
  77. <body>
  78. <button>淡入</button>
  79. <button>淡出</button>
  80. <button>切换</button>
  81. <button>改透明度为0.5</button>
  82. <div></div>
  83.  
  84. </body>
  85. </html>

1.6 自定义动画

语法：

  1. $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）

第二个参数表示：执行动画时长（可选）

第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             position: absolute;
  9.             left: 20px;
  10.             top: 30px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.         }
  15.     </style>
  16.     <script src="jquery-2.1.0.js"></script>
  17.     <script>
  18.         jQuery(function () {
  19.             $("button").click(function () {
  20.                 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
  21.                 var json2 = {
  22.                     "width": 100,
  23.                     "height": 100,
  24.                     "left": 100,
  25.                     "top": 100,
  26.                     "border-radius": 100,
  27.                     "background-color": "red"
  28.                 };
  29.  
  30.                 //自定义动画
  31.                 $("div").animate(json, 1000, function () {
  32.                     $("div").animate(json2, 1000, function () {
  33.                         alert("动画执行完毕！");
  34.                     });
  35.                 });
  36.  
  37.             })
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42. <button>自定义动画</button>
  43. <div></div>
  44. </body>
  45. </html>

1.7 停止动画

  1. $(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

true：后续动画不执行。

false：后续动画会执行。

第二个参数：

true：立即执行完成当前动画。

false：立即停止当前动画。

参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         ul {
  13.             list-style: none;
  14.         }
  15.  
  16.         .wrap {
  17.             width: 330px;
  18.             height: 30px;
  19.             margin: 100px auto 0;
  20.             padding-left: 10px;
  21.             background-color: pink;
  22.         }
  23.  
  24.         .wrap li {
  25.             background-color: green;
  26.         }
  27.  
  28.         .wrap > ul > li {
  29.             float: left;
  30.             margin-right: 10px;
  31.             position: relative;
  32.         }
  33.  
  34.         .wrap a {
  35.             display: block;
  36.             height: 30px;
  37.             width: 100px;
  38.             text-decoration: none;
  39.             color: #000;
  40.             line-height: 30px;
  41.             text-align: center;
  42.         }
  43.  
  44.         .wrap li ul {
  45.             position: absolute;
  46.             top: 30px;
  47.             display: none;
  48.         }
  49.     </style>
  50.     <script src="jquery-2.1.0.js"></script>
  51.     <script>
  52.         //入口函数
  53.         $(document).ready(function () {
  54.             //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
  55.             var jqli = $(".wrap>ul>li");
  56.  
  57.             //绑定事件
  58.             jqli.mouseenter(function () {
  59.                 $(this).children("ul").stop().slideDown(1000);
  60.             });
  61.  
  62.             //绑定事件(移开隐藏)
  63.             jqli.mouseleave(function () {
  64.                 $(this).children("ul").stop().slideUp(1000);
  65.             });
  66.         });
  67.     </script>
  68.  
  69. </head>
  70. <body>
  71. <div class="wrap">
  72.     <ul>
  73.         <li>
  74.             <a href="javascript:void(0);">一级菜单1</a>
  75.             <ul>
  76.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  77.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  78.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  79.             </ul>
  80.         </li>
  81.         <li>
  82.             <a href="javascript:void(0);">二级菜单1</a>
  83.             <ul>
  84.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  85.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  86.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  87.             </ul>
  88.         </li>
  89.         <li>
  90.             <a href="javascript:void(0);">三级菜单1</a>
  91.             <ul>
  92.                 <li><a href="javascript:void(0);">三级菜单2</a></li>
  93.                 <li><a href="javascript:void(0);">三级菜单3</a></li>
  94.                 <li><a href="javascript:void(0);">三级菜单4</a></li>
  95.             </ul>
  96.         </li>
  97.     </ul>
  98. </div>
  99. </body>
  100. </html>
  1. javascript:void(0); //跟javascript:;效果一样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

Web前端基础(16):jQuery基础(三)的更多相关文章

  1. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  2. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  3. web前端知识大纲：系列三 html篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 三.HTML 1.BOM BOM 是 Browser Object Model的缩写,即浏览器对象模型,当一个浏览器页面 ...

  4. Web前端基础(19):jQuery基础(六)

    1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...

  5. Web前端基础(18):jQuery基础(五)

    1. 事件 前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...

  6. Web前端基础(15):jQuery基础(二)

    1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...

  7. Web前端基础(17):jQuery基础(四)

    1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  8. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

随机推荐

  1. 《Java基础知识》Java多态和动态绑定

    在Java中,父类的变量可以引用父类的实例,也可以引用子类的实例. 请读者先看一段代码: public class Demo { public static void main(String[] ar ...

  2. java基础集合简介Map（三）下

    --Map接口简介 今天来看一看map集合,map映射接口,用于存放键值对,<key,value>,通过key来查找value,顾名思义key不能为空,唯一且不重复,不然底层怎么查呢! 可 ...

  3. kuangbin专题 数论基础 part1？

    线段树专题太难了,那我来做数学吧! 但数学太难了,我......(扯 这两天想了做了查了整理了几道数学. 除了一些进阶的知识,像莫比乌斯反演,杜教筛,min25学不会我跳了,一些基础的思维还是可以记录 ...

  4. 微信小程序目录结构与配置介绍

    一.小程序结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 官网 1.1 ...

  5. 简单的权限管理php

    转发自https://www.cnblogs.com/shenzikun1314/p/6604867.html#4262295 首先,要明白的基础理论是用户,角色,权限之间的关系是一对多,还是多对多. ...

  6. Flask 模板语言，装饰器

      Jinja2模板语言 # -*- coding: utf-8 -*-   from flask import Flask, render_template, request, redirect,  ...

  7. linux用户身份与文件权限

    用户 useradd [ 参数 ] 用户名 添加用户 sudo useradd -d /home/test -u 1001 -s /bin/bash name usermod [选项] 用户名 更改用 ...

  8. 从零开始学vuejs

    最近一段时间都花在了学习vue上,还总是断断续续的,学习的效果不是很明显,思考了好久了,应该是没有进行一个系统的总结,导致很多知识点总是似是而非,而且也有一部分是思维还没有从java转变过来,废话不多 ...

  9. NestedScrollView、ScrollView 加载完自动滑动至底部问题的解决方案

    正常情况下,由于NestedScrollView/ScrollView 嵌套RecyclerView,可能会导致Recyclerview占据焦点导致整个NestedScrollView/ScrollV ...

  10. Android插件基础之类加载器学习

    记录学习java 加载器学习所获心得,逐步记录了解java加载器的过程.为了知悉android 插件化的实现原理,从而需要从头了解android加载apk,以及基础的java类加载的加载过程情况,为方 ...