jQuery效果

jQuery 效果函数：

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

一、基本效果

1-1：show()

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅

show(speed, [easing], [callback])

speed:    //(可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:     //(可选)string

(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

callback:    // (可选)Function

在动画完成时执行的函数，每个元素执行一次。

1-2:hide()

以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

hide(speed, [easing], [callback])

speed：    //(可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:     //(可选)string

(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

callback:    // (可选)Function

在动画完成时执行的函数，每个元素执行一次。

示例：

<div class="container">

    <img src="../static/my_imgs/01.jpg" class="img-responsive" style="display: block">

    <button class="showImg">显示</button>

    <button class="hideImg">隐藏</button>

    <button class="toggleBtn">切换按钮</button>

</div>

------------------------------------------js

    $(function () {

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

            $("img").show(2000)

        })

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

            $("img").hide(2000)

        })

        $('.toggleBtn').click(function (vals) {

            if ($('.img-responsive').css('display') == 'block') {

                $("img").hide(2000)

                $('.img-responsive').css({'display': 'none'})

            } else {

                $("img").show(2000)

                $('.img-responsive').css({'display': 'block'})

            }

        })

    })

二、滑动效果

2-1:slideUp()

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

slideUp([speed,[easing],[fn]])

speed:(可选)三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:(可选)在动画完成时执行的函数，每个元素执行一次。

2-2:slideDown()

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

slideDown([speed],[easing],[fn])

speed:(可选) 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：(可选) 在动画完成时执行的函数，每个元素执行一次。

2-3:slideToggle()

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

slideToggle([speed],[easing],[fn])

speed:(可选) 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:(可选) 在动画完成时执行的函数，每个元素执行一次。

示例：

<body>

<div class="container">

    <p>This is a paragraph.</p>

    <button class="btn1">Hide</button>

    <button class="btn2">Show</button>

    <button class="btn3">Toggle</button>

</div>

<script>

    $(document).ready(function () {

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

            $("p").slideUp("slow", function () {

                alert("Animation Done.");

            });

        });

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

            $("p").slideDown();

        });

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

            $("p").slideToggle('slow',function () {

                alert('滑动切换完成！')

            });

        });

    })

</script>

</body>

三、淡入淡出效果

3-1:fadeIn()

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeIn([speed],[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

3-2:fadeOut()

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut([speed],[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

3-3:fadeTo()

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo([[speed],opacity,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

3-4:fadeToggle()

fadeToggle([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例：

<body>

<div class="container">

    <div class="item" style="background-color: #8c8c8c;width: 300px;height: 100px;color: white;font-size: 26px;font-weight: 700;text-align: center;line-height: 100px">This is a paragraph.</div>

    <button class="btn1">fadeIn</button>

    <button class="btn2">fadeOut</button>

    <button class="btn3">fadeToggle</button>

    <button class="btn4">fadeTo</button>

</div>

<script>

    $(document).ready(function () {

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

            $(".item").fadeIn("slow",easing='linear',function () {

                $(".item").css({'background-color':'orange'})

            });

        });

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

            $(".item").fadeOut();

        });

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

            $(".item").fadeToggle('slow',function () {

                alert('fadeToggle切换完成！')

            });

        });

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

            $(".item").fadeTo('slow',0.4,function () {

                $(".item").css({'color':'black'})

            });

        }).dblclick(function () {

            $(".item").fadeTo(200,1,function () {

                $(".item").css({'color':'red'})

            });

        });

    })

</script>

</body>

四、自定义效果

4-1:animate()

参考：http://www.w3school.com.cn/jquery/effect_animate.asp

http://api.jquery.com/animate/

定义和用法：

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

语法 1：

$(selector).animate(styles,speed,easing,callback)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

语法 2：

$(selector).animate(styles,options)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值（同上）。
options	可选。规定动画的额外选项。可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

参数

描述

styles

必需。规定产生动画效果的 CSS 样式和值（同上）。

options

可选。规定动画的额外选项。

可能的值：

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

4-2:stop()

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

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

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

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

  $("#panel").stop();

});

效果：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

    $("#panel").slideDown(5000);

  });

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

    $("#panel").stop();

  });

});

</script>

<style type="text/css">

#panel,#flip

{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel

{

padding:50px;

display:none;

}

</style>

</head>

<body>

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

<div id="flip">点击这里，向下滑动面板</div>

<div id="panel">hello world!

</div>

</body>

</html>

4-3:jQuery Callback

Callback 函数在当前动画 100% 完成之后执行。

典型的语法：

$(selector).hide(speed,callback)

示例：

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

4-4:finish()

示例：

效果1：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

    var div=$("div");

    div.animate({height:'300px',opacity:'0.4'},"slow");

    div.animate({width:'300px',opacity:'0.8'},"slow");

    div.animate({height:'100px',opacity:'0.4'},"slow");

    div.animate({width:'100px',opacity:'0.8'},"slow");

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

    var div=$("div");

    div.animate({left:'100px'},"slow");

    div.animate({fontSize:'3em'},"slow");

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

"+=","-="相对动画

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

    $("div").animate({

      left:'250px',

      height:'+=150px',

      width:'+=150px'

    });

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

</body>

</html>

jQuery animate() - 操作多个属性

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

  $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

  });

});

五、设置

5-1:jQuery.fx.off

关闭页面上所有的动画。

把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

* 你在配置比较低的电脑上使用jQuery。

* 你的一些用户由于动画效果而遇到了可访问性问题

当把这个属性设成false之后，可以重新开启所有动画。

示例：

执行一个禁用的动画

jQuery.fx.off = true;

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

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

  });

【Python全栈-JavaScript】jQuery效果的更多相关文章

【Python全栈-JavaScript】jQuery事件
jQuery事件一.页面载入当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
Python全栈-JavaScript】jQuery工具
jQuery工具一.jQuery.browser.version 显示当前 IE 浏览器版本号. if ( $.browser.msie ) alert( $.browser.version ); ...
【Python全栈-JavaScript】JavaScript入门
JavaScript基础知识点一.JavaScript概述参考:http://www.w3school.com.cn/b.asp JavaScript的历史 1.1992年Nombas开发出C-m ...
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
【Python全栈-JavaScript】JavaScript-字符串详解
JavaScript-字符串详解预热:Number() 方法 <script> //重要等级 1,2,3,4,5 var s=10; //最高级别5 var s1=new Number( ...
老男孩Python全栈第2期+课件笔记【高清完整92天整套视频教程】
点击了解更多Python课程>>> 老男孩Python全栈第2期+课件笔记[高清完整92天整套视频教程] 课程目录 ├─day01-python 全栈开发-基础篇 │ 01 pyth ...
python 全栈开发，Day117(popup,Model类的继承,crm业务开发)
昨日内容回顾第一部分:权限相关 1. 权限基本流程用户登录成功后获取权限信息,将[权限和菜单]信息写入到session. 以后用户在来访问,在中间件中进行权限校验. 为了提升用户体验友好度,在后台 ...
python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

随机推荐

MariaDB：开启日志记录SQL
1.开启日志红色是命令,之下是回显. MariaDB [jksfrz]> SET GLOBAL log_output = 'TABLE'; Query OK, 0 rows affected ...
【原创】大数据基础之Spark（7）spark读取文件split过程（即RDD分区数量）
spark 2.1.1 spark初始化rdd的时候,需要读取文件,通常是hdfs文件,在读文件的时候可以指定最小partition数量,这里只是建议的数量,实际可能比这个要大(比如文件特别多或者特别 ...
【原创】算法基础之Anaconda（1）简介、安装、使用
Anaconda 2 官方:https://www.anaconda.com/ 一简介 The Most Popular Python Data Science Platform Anaconda® ...
【原创】大叔经验分享（27）linux服务器升级glibc故障恢复
redhat6系统默认安装的glibc-2.12,有的软件依赖的是glibc-2.14,这时需要升级glibc,下载安装 http://ftp.gnu.org/gnu/glibc/glibc-2.14 ...
编辑技巧分享如何给PDF添加注释
纸质的文件想要添加注释就直接拿笔在上面添加就好了,那么电子文件要怎么添加注释呢,今天小编就以我们现在经常使用到的PDF文档来为大家分享怎么添加注释. 1. 我们需要在百度中搜索并下载并安装一款PD ...
论文阅读笔记四十三：DeeperLab: Single-Shot Image Parser（CVPR2019）
论文原址:https://arxiv.org/abs/1902.05093 github:https://github.com/lingtengqiu/Deeperlab-pytorch 摘要本文提 ...
Java List根据对象的某个属性合并list
package com.test; import java.util.ArrayList; import java.util.List; public class FileTest { public ...
解决 RecyclerView 在Android Studio已经导入情况下还无法实例引用问题
系统:Windows 10 IDE::android studio 1. 问题:RecyclerView 在Android Studio已经导入情况下还无法实例引用问题由于RecyclerView是 ...
读取InputStream 中的内容
读取InputStream 中的内容 ]) { , len); //把读取到的内容写到输出流中 } //<4> 把字节数组转换为字符串 String content = baos.to ...
(三)ajax请求不同源之websocket跨域
WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀.该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信. 一.WebSocket目标在一个单独的 ...

【Python全栈-JavaScript】jQuery效果

jQuery效果

jQuery 效果函数：

一、基本效果

1-1：show()

1-2:hide()

示例：

二、滑动效果

2-1:slideUp()

2-2:slideDown()

2-3:slideToggle()

示例：

三、淡入淡出效果

3-1:fadeIn()

3-2:fadeOut()

3-3:fadeTo()

3-4:fadeToggle()

示例：

四、自定义效果

4-1:animate()

定义和用法：

语法 1：

4-2:stop()

语法:

4-3:jQuery Callback

典型的语法：

4-4:finish()

示例：

"+=","-="相对动画

jQuery animate() - 操作多个属性

五、设置

5-1:jQuery.fx.off

【Python全栈-JavaScript】jQuery效果的更多相关文章

随机推荐

热门专题