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

随机推荐

Robot Framework搭建
需要安装的内容如下: 1. Python2.7.13(听说python3对RF支持的不是很好,所以我下的Python2) 2. wxPython 2.8.12.1(只能这个版本) 3. robotfr ...
python单元测试框架-unittest（三）之用例执行顺序
执行顺序规则: 测试类或测试方法的数字与字母顺序0~9,A-Z 执行如下脚本,理解用例执行顺序 #coding=utf-8 import unittest class Test1(unittest.T ...
C++中遇到的各种小问题
lpcwstr类型问题在使用VS2010开发C++程序时,由于系统默认字符集是unicode字符集,造成与早期的字符串格式不兼容问题 ①Properties — Configuration Prop ...
spring DelegatingFilterProxy管理过滤器
安全过滤器链 Spring Security的web架构是完全基于标准的servlet过滤器的.它没有在内部使用servlet或任何其他基于servlet的框架(比如spring mvc),所以它没有 ...
vue学习中遇到的onchange、push、splice、forEach方法使用
最近在做vue的练习,发现有些js中的基础知识掌握的不牢,记录一下: 1.onchange事件:是在域的内容改变时发生,单选框与复选框改变后触发的事件. 2.push方法:向数组的末尾添加一个或多个元 ...
DJ轮回舞曲网下载教程
该网站网址为:http://www.92cc.com/ 昨天有网友问我这个网站能不能下载.我告诉他,只要能在线试听的就能下载于是今天出个临时教程教大家如何获取试听的音乐URL. 第一步找到试听的网 ...
Spring-cloud微服务 Eureka学习教程-单服务器配置之快速搭建EurekaServer、EurekaClient（基础）
以下实例代码下载地址:https://github.com/wades2/EurekaDemo Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现, ...
react-router + redux + react-redux 的例子与分析
一个 react-router + redux + react-redux 的例子与分析 index.js import React from 'react' import ReactDom fr ...
canvas制作倒计时炫丽效果
<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ displ ...
Android基础Activity篇——其他隐式Intent
1.使用隐式Intent调用浏览器修改FirstActivity中的按钮点击事件代码. Intent intent=new Intent(Intent.ACTION_VIEW); intent.se ...