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 ...

随机推荐

【原创】大叔问题定位分享（17）spark查orc格式数据偶尔报错NullPointerException
spark查orc格式的数据有时会报这个错 Caused by: java.lang.NullPointerException at org.apache.hadoop.hive.ql.io.orc. ...
rsyslog磁盘辅助(Disk-Assisted)模式踩坑记
最近公司为方便tracing.排查, 搞全链路日志收集,而我手上的10亿+pv的动态前端服务必然在考虑之列. 之前呢. 都是运维定制的收集方式: 如上图,rsyslog push kafka, 优点嘛 ...
剑指offer数组列表
一.数组面试题3 : 找出数组中重复的数字面试题3(二):不修改数组找出重复的数字面试题4:二维数组的查找面试题21:调整数组顺序使奇数位于偶数前面面试题39:数组中出现次数超过一半的数字 ...
IntelliJ IDEA，酷炫插件系列，提高你的工作效率
今天介绍一下IDEA的一些炫酷的插件,IDEA强大的插件库,不仅能给我们带来一些开发的便捷,还能体现我们的与众不同. 1.插件的安装打开setting文件选择Plugins选项 Ctrl + Alt ...
Redis 可视化工具：Web Redis Manager
以前用的:RedisDesktopManager (0.9.3以后需要订阅) https://github.com/uglide/RedisDesktopManager/releases 现在需要订阅 ...
Java Spring Boot VS .NetCore （九） Spring Security vs .NetCore Security
Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...
UWP WebView 禁用缩放
只要加入一行 css 样式就行了 html, body { -ms-content-zooming:none; } MSDN:https://msdn.microsoft.com/library/ ...
Sqlserver 锁(转)
转载 http://www.cnblogs.com/zhouqianhua/archive/2011/04/15/2017049.html 总结: 锁的种类: 共享锁\排它锁\更新锁\意向锁\计 ...
Linux下如何查看系统启动时间和运行时间以及安装时间
1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.00 2.查看/proc/uptime文件计算 ...
LNMP一键安装包添加虚拟主机、删除虚拟主机及如何使用伪静态
本文主要介绍LNMP一键安装包添加虚拟主机.删除虚拟主机及如何使用伪静态. 一.添加虚拟主机通俗点就是在VPS/服务商上添加一个网站(域名). 需要执行如下命令:/root/vhost.sh 执行后会 ...

【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效果的更多相关文章

随机推荐

热门专题