前端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& ...

随机推荐

SETI ACdream - 1430 后缀自动机求不相交子串
http://blog.csdn.net/gatevin/article/details/45875343 题目是求不重叠的不同子串个数一般来说, endpos集合包含了子串结尾位置,结尾在&quo ...
CAD安装失败怎样卸载CAD 2013？错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
DEDECMS v5.7 完美实现导航条下拉二级菜单
一.引言好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...
java解析json串常识
注意:JSONObject 和JSONArray的使用区别报错:A JSONObject text must begin with '{' at character 1 of 分析: JSONOb ...
关于hibernate save方法未能存储数据入库的处理过程
关于hibernate save方法未能存储数据入库的处理过程2018年04月18日 10:57:49 守望dfdfdf 阅读数:230更多个人分类: 工作问题编辑版权声明:本文为博主原创文章,转载 ...
转：Oracle优化总结
本文主要从大型数据库ORACLE环境四个不同级别的调整分析入手,分析ORACLE的系统结构和工作机理,从九个不同方面较全面地总结了 ORACLE数据库的优化调整方案. 关键词 ORACLE数据库环境 ...
Android 修改TabLayout底部导航条Indicator的长短
关于Tablayout,使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题,看代码: p ...
Struts2_HelloWorld_7_2
第一个程序的流程图: Struts2.x 的作用:把请求和展现分开.
selenium中Alter等弹出对话框的处理
昨天使用selenium做自动化测试,发现部分页面会弹出alert对话框,找了写资料,大概的意思就是要给弹出的对话框做出相应,不然,后续的处理会失败. _driver.SwitchTo().Alert ...
c#Winform程序调用app.config文件配置数据库连接字符串
你新建winform项目的时候,会有一个app.config的配置文件,写在里面的<connectionStrings name=" " connectionString= ...