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

随机推荐

rem布局，根据不用设备分辨率更改跟字体大小
(function(win,doc){ change(); function change(){ doc.documentElement.style.fontSize = doc.documentEl ...
性能测试工具Jmeter03-功能概要
Jmeter工具组成部分资源生成器:用于生成测试过程中服务器.负载机的资源代码.(LR中的VuGen) 用户运行器:通常是一个脚本运行引擎,根据脚本要求模拟指定的用户行为.(LR中的Controll ...
小萝卜控机大师录制脚本（手机app自动化）
手机自动化测试之前发布过小萝贝控机大师与按键精灵结合实现手机自动化测试的功能,小萝贝控机大师升级了实现了更多手机自动化测试的功能,如下: l 手机功能自动化测试:录制脚本,检查点时点击小萝贝控机大师 ...
firefox插件-自动化测试工具-selenium IDE
教程:http://www.yiibai.com/selenium/selenium_download_ide.html 下载地址:https://addons.mozilla.org/en-US/f ...
ThreadPoolExecutor的三种队列SynchronousQueue，LinkedBlockingQueue，ArrayBlockingQueue
SynchronousQueue SynchronousQueue是无界的,是一种无缓冲的等待队列,但是由于该Queue本身的特性,在某次添加元素后必须等待其他线程取走后才能继续添加:可以认为Sync ...
windows下curl的安装和简单使用
curl是利用URL语法在命令行方式下工作的开源文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP. 一 ...
修改jar包bug的方式
第一种方式 1. 直接在项目同样的包名里面新建同样的class,会优先jar包的class加载,等同于覆盖. 第二种方式 2. 拿到第一步打包后的jar或者war,找到相应的java类的.class文 ...
css多行文本溢出显示省略号
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
ssh-agent && ssh-agent forward && SSH ProxyCommand
http://blog.csdn.net/sdcxyz/article/details/41487897 https://developer.github.com/guides/using-ssh-a ...
SQLServer：执行计划
http://www.cnblogs.com/kissdodog/category/532309.html