前端jQuery之动画操作及相关演示

1.显示动画

1.1无参数，直接让指定的元素显示出来

 $("div").show();

1.2通过控制宽高，透明度，display属性逐渐显示，指定时间现实完毕

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

1.3特定参数类型

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

参数:

　　slow:600ms

　　normal:400ms

　　fast:200ms

1.4动画执行完毕，立即执行回调函数

 //show(毫秒值，回调函数;

    $("div").show(5000,function () {

        alert("动画执行完毕！");

    });

2.隐藏动画

代码和显示动画类似

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

3.开关显示隐藏动画

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

4.滑入和滑出动画效果

滑入，这里默认值是400ms

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

滑出

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

滑入滑出切换动画效果

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

5.淡入淡出动画效果

淡入效果

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

淡出效果

$(selector).fadeOut(1000);

淡入淡出效果

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

6.自定义动画

可以执行一组css属性的自定义动画

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

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

7.停止动画

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

代码含义

第一个参数：

true：后续动画不执行。

false：后续动画会执行。

第二个参数：

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

false：立即停止当前动画。

代码演示

自定义动画：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            position: absolute;

            left: 20px;

            top: 30px;

            width: 100px;

            height: 100px;

            background-color: green;

        }

    </style>

    <script src="jquery-3.3.1.js"></script>

    <script>

        jQuery(function () {

            $("button").click(function () {

                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};

                var json2 = {

                    "width": 100,

                    "height": 100,

                    "left": 100,

                    "top": 100,

                    "border-radius": 100,

                    "background-color": "red"

                };

                //自定义动画

                $("div").animate(json, 1000, function () {

                    $("div").animate(json2, 1000, function () {

                        alert("动画执行完毕！");

                    });

                });

            })

        })

    </script>

</head>

<body>

<button>自定义动画</button>

<div></div>

</body>

</html>

停止动画效果（很经典的一个案例）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .wrap {

            width: 330px;

            height: 30px;

            margin: 100px auto 0;

            padding-left: 10px;

            background-color: pink;

        }

        .wrap li {

            background-color: green;

        }

        .wrap > ul > li {

            float: left;

            margin-right: 10px;

            position: relative;

        }

        .wrap a {

            display: block;

            height: 30px;

            width: 100px;

            text-decoration: none;

            color: #000;

            line-height: 30px;

            text-align: center;

        }

        .wrap li ul {

            position: absolute;

            top: 30px;

            display: none;

        }

    </style>

    <script src="jquery-3.3.1.js"></script>

    <script>

        //入口函数

        $(document).ready(function () {

            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。

            var jqli = $(".wrap>ul>li");

            //绑定事件

            jqli.mouseenter(function () {

                $(this).children("ul").stop().slideDown(1000);

            });

            //绑定事件(移开隐藏)

            jqli.mouseleave(function () {

                $(this).children("ul").stop().slideUp(1000);

            });

        });

    </script>

</head>

<body>

<div class="wrap">

    <ul>

        <li>

            <a href="javascript:void(0);">一级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">二级菜单2</a></li>

                <li><a href="javascript:void(0);">二级菜单3</a></li>

                <li><a href="javascript:void(0);">二级菜单4</a></li>

            </ul>

        </li>

        <li>

            <a href="javascript:void(0);">二级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">二级菜单2</a></li>

                <li><a href="javascript:void(0);">二级菜单3</a></li>

                <li><a href="javascript:void(0);">二级菜单4</a></li>

            </ul>

        </li>

        <li>

            <a href="javascript:void(0);">三级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">三级菜单2</a></li>

                <li><a href="javascript:void(0);">三级菜单3</a></li>

                <li><a href="javascript:void(0);">三级菜单4</a></li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>

动画潜入浅出效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            background-color: green;

        }

    </style>

</head>

<body>

    <button id="show">显示</button>

    <button id="hide">隐藏</button>

    <button id="qiehuan">切换</button>

    <div class="box">

    </div>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            // $('.box').css('display','block');

            $('#show').click(function(){

                $('.box').show(3000);

                });

            });

            $('#hide').click(function(){

                $('.box').hide(3000);

            });

            $('#qiehuan').click(function(){

                $('.box').toggle(3000);

            })

    </script>

</body>

</html>

动画卷帘门效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            background-color: green;

            display: none;

        }

    </style>

</head>

<body>

    <button id="show">滑入</button>

    <button id="hide">滑出</button>

    <button id="qiehuan">切换</button>

    <div class="box">

    </div>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            $('#show').click(function(){

                $('.box').slideDown(1000);

            });

            $('#hide').click(function(){

                $('.box').slideUp(1000);

            });

            $('#qiehuan').click(function(){

                $('.box').slideToggle(1000);

            })

        })

    </script>

</body>

</html>

前端jQuery之动画操作及相关演示的更多相关文章

前端 ----关于DOM的操作的相关实例
关于DOM操作的相关案例 1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE ...
前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
前端 ----jQuery的文件操作
06-jQuery的文档操作*** 之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的 ...
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画方式一: $("div" ...
前端jQuery之属性操作
属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...
JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...

随机推荐

Windows 环境下安装MongoDB
mongoDB下载地址 https://www.mongodb.org/ 在mongoDB官网下载windows版本的mongoDB后解压出来(本文以解压到D盘为例) 在解压出来的MongoDB文件夹 ...
MQTT学习之一
一MQTT特性: 基于C/S,发布订阅(发布者服务器->云平台代理->订阅客户端)一对多结构,适用于低带宽高延时,基于TCP/IP之上.
CAD安装失败怎样卸载CAD 2012？错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
(转)Shell脚本编程－－Uniq命令
uniq 原文:http://blog.csdn.net/xifeijian/article/details/9209627 uniq命令可以去除排序过的文件中的重复行,因此uniq经常和sort合用 ...
java 多线程 yield方法的意义
Thread.yield( )方法: 使当前线程从执行状态(运行状态)变为可执行态(就绪状态).cpu会从众多的可执行态里选择,也就是说,当前也就是刚刚的那个线程还是有可能会被再次执行到的,并不是说一 ...
解决MyEclipse报errors running builder ‘javascript validator’ on project
今天导入项目的时候,报了以下错误 MyEclipse测到功能代码变化(保存动作触发)就报错: errors running builder ‘javascript validator’ on proj ...
Linux访问https报错
今天用Linux(CentOS)拉Git仓库时,报了个错unable to access 'https://github.com/Wind4/vlmcsd.git/': SSL connect err ...
webpack中package.json中的Script
初始化项目 cnpm init -y ,会自动生成一个package.json文件:主要是显示项目的名称.版本.作者.协议等信息在package.json中scripts中配置:(运行简化) 开发模 ...
IntelliJ IDEA详细配置和使用教程（转）
http://blog.csdn.net/m_m254282520/article/details/78900238 关闭Intellij IDEA自动更新在File->Settings-&g ...
ArcMap如何修改地图坐标系统
有时候,地图投影坐标需要作出修改,使得符合要求,不然空间参考不一样无法进行进一步的操作,分析等!下面介绍arcgis地图投影坐标的修改! 1.首先,将地图数据导入,这里我导入的是广西的边界图bound ...