又是一天过去了，今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。

　　

<!DOCTYPE html>

<html>

<head>

    <title>滑动和动画</title>

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

    <script type="text/javascript">

        // slideDown(speed,callback);用于向下滑动元素。

        // $(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideDown(2000);

        //     })

        // })

        // slideUp(speed,callback);用于向上滑动元素；

        // $(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideUp();

        //     })

        // })

        // slideToggle(speed,callback);切换元素可见状态。

        // $().ready(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideToggle(3000);

        //     })

        // })

        // animate({params}，speed,callback)

        // 必需的params参数定义形成动画的CSS属性

        // 接下来我们吧div元素向右移动300px

        // 默认情况下所有的HTML元素有一个静态的位置，且是不可移动的，

        // 如果需要改变，我们需要将元素的positin属性设置为relative,fixed和

        // absolute.

        // $(function(){

        //     $('button').click(function(){

        //         $('div').animate({left:'300px'},4000);

        //     })

        // })

        // 我们可以继续使用animate()来操作多个属性

        // animate()几乎可以操作所有的css属性，必需使用camel（峰驼法）格式书写类似于paddingLeft相关的属性。

        // 同时，色彩颜色并不包含在核心JQuery库中，如果需要生成颜色动画，需

        // 要下载颜色动画插件

        // $(document).ready(function(){

        //     $('button').click(function(){

        //         $('div').animate({

        //             left:'300',

        //             opacity:'0.2',

        //             width:'100',

        //             height:'400'

        //         });

        //     });

        // });

        // animate({params},speed.callback);也可以定义相对值（该值

        // 相对于元素的当前值），需要在值的前面就加上

        // +=或-=

        // $(function(){

        //     $('button').click(function(){

        //         $('div').animate({

        //             left:'20px',

        //             width:'+=20',

        //             height:'+=20'

        //         })

        //     })

        // })

        // animate()使用预定义的值

        // 比如下面的例子高度可以设置成'show','hide','toggle'.

        // $(function(){

        //     $('button').click(function(){

        //         $('div').animate({

        //             height:'toggle'

        //         });

        //     });

        // });

        // 默认情况下，JQuery提供针对动画队列功能

        // 意味这你在彼此编写多个anmiate()调用，JQuery会

        // 创建包含这些方法调用的‘内部’队列，然后逐一运行这些animate调用

        // 例子1

        // $(document).ready(function(){

        //     $('button').click(function(){

        //         var div=$('div');

        //         div.animate({top:'400',opacity:'0.5'});

        //         div.animate({left:'400',opacity:'0.2'});

        //         div.animate({top:'40',opacity:'0.5'});

        //         div.animate({left:'40',opacity:'1'});

        //     });

        // })

        // 例子二:先把div移动，然后放大中间字体

        $().ready(function(){

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

                $('div').animate({

                    top:'50',

                    left:'100',

                    width:'500',

                    height:'300',

                    opacity:'0.3'

                },3000);

                $('div').animate({

                    fontSize:'100'

                },5000);

            });

        })

    </script>

    <style type="text/css">

        #flip,#panel{

            padding: 5px;

            text-align:center;

            background-color: yellow;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <!-- <div id="flip">点我滑动</div>

    <div id="panel" style="display: block;height: 300px;line-height: 300px;">Hellow World!!</div> -->

    <button>开始动画</button>

    <div style="position: absolute;width: 200px;height: 200px;background-color: red;">这就是爱爱爱爱！！</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>stop()方法</title>

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

    <script type="text/javascript">

        $(function(){

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

                $('#panel').animate({

                    height:'show'

                },2000);

                $('#panel').animate({

                    fontSize:'30'

                },2000);

            })

        });

        $(function(){

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

                $('#panel').stop(false,false);

            })

        });

        // stop(),用于停止动画效果，在它们完成之前

        // stop()方法适用于所有JQuery效果函数，包括滑动，淡入淡出和自定义动画

        // stop(stopAll,goToEnd)

        // stopAll参数规定是否立即清除当前动画，默认是false

        // 即仅停止活动的动画，准许任何排入队列的动画向后执行

        // （改为true，则该函数所有动画暂停,不管是true还是false,第一个动画已经暂停，控制的是后面队列的函数）

        // goToEnd参数规定是否立即完成当前动画，默认false

    </script>

    <style type="text/css">

        div{

            padding: 5px;

            text-align:center;

            background-color: gray;

            border: 1px solid black;

        }

        #panel{

            padding: 50px;

        }

    </style>

</head>

<body>

    <button id="stop">停止滑动</button>

    <div id="flip">点我向下滑动面板</div>

    <div id="panel" style="display: none;">Hellow World!</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>案例</title>

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

    <script type="text/javascript">

        // slideDown用法

        // $(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideDown('slow',function(){

        //             $('#panel').css('opacity','0.3');

        //         });

        //     })

        // })

        // slideUp用法

        // $(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideUp('slow');

        //     })

        // })

        // slideToggle用法

        // $(function(){

        //     $('#flip').click(function(){

        //         $('#panel').slideToggle('slow');

        //     })

        // })

        // 停止动画中stop用法

        $(function(){

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

                $('div').animate({

                    left:'100px'

                },4000);

                $('div').animate({fontSize:'60px'},4000);

            })

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

                $('div').stop();

            })

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

                $('div').stop(true);

            })

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

                $('div').stop(true,true);

            })

        })

    </script>

    <style type="text/css">

        div{

            padding: 5px;

            text-align: center;

            background-color: blue;

            border: 1px solid black;

        }

        #panel{

            padding: 50px;

        }

    </style>

</head>

<body>

    <!-- <div id="flip">点我</div>

    <div id="panel" style="display: block;">Hellow World!!</div> -->

    <button id="start">开始</button>

    <button id="stop">停止</button>

    <button id="stop2">停止所有</button>

    <button id="stop3">停止动画，但完成动作</button>

    <div style="position: absolute;width: 200px;height: 100px;background-color: red;">World!</div>

</body>

</html>

滑动和animate以及如何停止动画的更多相关文章

  1. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  2. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  3. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  4. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. jquery中stop停止动画笔记

    jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...

  7. jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. jQuery 效果 – 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动 演示 jQuery stop() 方法. jQuery s ...

随机推荐

  1. 微信小程序快速开发上手

    微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...

  2. Java接口实现传参

    package com.gezhi.interfaces;/** * 新建一个dog类实现接口livingable(狗吃和上厕所都是与生俱来的不应该写成接口) * @author square 凉 * ...

  3. JavaWeb过滤器.监听器.拦截器-原理&区别-个人总结

    对比项 拦截器 过滤器 机制 反射机制 函数回调 是否依赖servlet容器 是 否 请求处理 只能对action请求起作用 几乎所有的请求起作用 对action处理 可以访问action上下文.值栈 ...

  4. Xapian的内存索引

    关键字:xapian.内存索引 xapian除了提供用于生产环境的磁盘索引,也提供了内存索引(InMemoryDatabase).内存索引.我们可以通过观察内存索引的设计,来了解xapian的设计思路 ...

  5. nginx的configure流程

    configure配置 nginx的编译过程,第一步是configure.我们使用 --help可以看到configure的很多配置. configure的过程做的事情其实就是检测环境,然后根据环境生 ...

  6. 微信扫码登录（3）---授权码code获取用户基本信息

    授权码code获取用户基本信息 上一遍已经获得微信回调的code,网址:回调获取code     那这篇通过code和其它参数去获得用户基本信息. 1.UserServiceImpl关键代码 @Ove ...

  7. JS 中 原生方法 (二) --- 数组 (修---添加ES6新增)

    const arr = [1, 2, 3, 5, 'a', 'b'] /** * * length * 这个只能被 称之为 数组的原生属性, 返回 一个 number * arr.length */ ...

  8. ARP欺骗攻击

    一.ARP攻击概述 ARP攻击主要是存在于局域网中,通过伪造IP地址和MAC地址实现ARP欺骗,能够在网络中产生大量的ARP通信量使网络阻塞,攻击者只要持续不断的发出伪造的ARP响应包就能更改目标主机 ...

  9. 阿里云—Gartner 2018 亚太区WAF魔力象限唯一云WAF提供商

    近日,Gartner发布亚太区2018年度Web应用防火墙(简称“WAF”)魔力象限报告,阿里云WAF凭借成熟的产品能力和完善的服务体系成功入围,且是唯一一家进入该魔力象限的云WAF提供商. 报告指出 ...

  10. 系统开发中使用拦截器校验是否登录并使用MD5对用户登录密码进行加密

    项目名称:客户管理系统 项目描述: 项目基于javaEE平台,B/S模式开发.使用Struts2.Hibernate/Spring进行项目框架搭建.使用Struts中的Action 控制器进行用户访问 ...