jQuery动画与特效详解


Posted in Javascript onFebruary 01, 2015

1.显示和隐藏hide()和show()

对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。

<script type="text/javascript">

            $(function() {

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

                    $("p").hide(); //隐藏

                });

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

                    $("p").show(); //显示

                });

            });

        </script>

        <input type="button" value="Hide">

        <input type="button" value="Show">

        <p>点击按钮,看看效果</p>

        <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>

        </div>

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法

上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏过程。
语法如下

show(duration,[callback]);
hide(duration,[callback]);
其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行。

<script type="text/javascript">

            $(function() {

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

                    $("p").hide(300); //隐藏

                });

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

                    $("p").show(500); //显示

                });

            });

        </script>

例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

2.使用fadeIn()和fadeOut()方式

对于动画效果显隐,jQuery还提供了fadeIn()个fadeOut这两个实用的方法,他们的动画效果类似褪色,语法与slow()和hide()完全相同。

            fadeIn(duration, [callback]);
            fadeOut(duration, [callback]);
例子

<script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    $("img").fadeOut(3000); //逐渐fadeOut

                });

                $("input:eq(1)").click(function() {

                    $("img").fadeIn(1000); //逐渐fadeIn

                });

            });
        </script>
        <img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg">

        <input type="button" value="Hide">

        <input type="button" value="Show">

fadeTo()方法的使用。

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

例子:

<script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    $("img").fadeOut(1000);

                });

                $("input:eq(1)").click(function() {

                    $("img").fadeIn(1000);

                });

                $("input:eq(2)").click(function() {

                    $("img").fadeTo(1000, 0.5);

                });

                $("input:eq(3)").click(function() {

                    $("img").fadeTo(1000, 0);

                });

            });

        </script>

            <p><img src="03.jpg"></p>

<input type="button" value="FadeOut">

<input type="button" value="FadeIn">

<input type="button" value="FadeTo 0.5">

<input type="button" value="FadeTo 0">

fadeOut相关参数

speed 
可选。规定元素从当前透明度到指定透明度的速度。

可能的值:

毫秒 (比如 1500)
"slow"
"normal"
"fast"
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 
可选。fadeTo 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

3.幻灯片slideUp和slideDown效果

<script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    $("div").add("img").slideUp(1000);

                });

                $("input:eq(1)").click(function() {

                    $("div").add("img").slideDown(1000);

                });

                $("input:eq(2)").click(function() {

                    $("div").add("img").hide(1000);

                });

                $("input:eq(3)").click(function() {

                    $("div").add("img").show(1000);

                });

            });

        </script>  

    <input type="button" value="SlideUp">

    <input type="button" value="SlideDown">

    <input type="button" value="Hide">

    <input type="button" value="Show"><br>

    <div></div><img src="04.jpg">

前面提到了几种动画效果,jQuery还提供了slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果,它与slow()和hide()完全相同。

以上代码定义了一个div和一个img,用add方法组合在一起。

4.自定义动画

考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表,以及希望变化到的最终值,duration为可选项,与show()/hide()的参数含义完全相同。easing为可选参数,通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

 需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持。

<style>

            div {

                background-color: #FFFF00;

                height: 40px;

                width: 80px;

                border: 1px solid #000000;

                margin-top: 5px;

                padding: 5px;

                text-align: center;

            }

        </style>

        <script type="text/javascript">

            $(function() {

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

                    $("#block").animate({

                        opacity: "0.5",

                        width: "80%",

                        height: "100px",

                        borderWidth: "5px",

                        fontSize: "30px",

                        marginTop: "40px",

                        marginLeft: "20px"

                    }, 2000);

                });

            });

        </script>

        <button id="go">Go>></button>

        <div id="block">动画!</div>

在params中,jQuery还可以用“+=”或者"-="来表示相对变化。如

<style>

            div {

                background-color: #FFFF00;

                height: 40px;

                width: 80px;

                border: 1px solid #000000;

                margin-top: 5px;

                padding: 5px;

                text-align: center;

                position: absolute;

            }

        </style>

        <script type="text/javascript">

            $(function() {

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

                    $("#block").animate({

                        left: "-=80px" //相对左移

                    }, 300);

                });

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

                    $("#block").animate({

                        left: "+=80px" //相对右移

                    }, 300);

                });

            });

        </script>

        <button >Go>></button>

        <button >Go>></button>

        <div id="block">动画!</div>

先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。

animate()方法还有另外一种形式,如下所示:

animate(params,options)
其中,params与第一种形式完全相同,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种形式完全一样,queue为布尔值,表示当有多个 animate()组成jQuery时,当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子,展示了animate()第二种用法。

    <style>

            div {

                background-color: #FFFF22;

                width: 100px;

                text-align: center;

                border: 2px solid #000000;

                margin: 3px;

                font-size: 13px;

                font-family: Arial, Helvetica, sans-serif;

            }

            input {

                border: 1px solid #000033;

            }

        </style>

        <script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    //第一个animate与第二个animate同时执行,然后再执行第三个

                    $("#block1").animate({

                            width: "90%"

                        }, {

                            queue: false,

                            duration: 1500

                        })

                        .animate({

                            fontSize: "24px"

                        }, 1000)

                        .animate({

                            borderRightWidth: "20px"

                        }, 1000);

                });

                $("input:eq(1)").click(function() {

                    //依次执行三个animate

                    $("#block2").animate({

                            width: "90%"

                        }, 1500)

                        .animate({

                            fontSize: "24px"

                        }, 1000)

                        .animate({

                            borderRightWidth: "20px"

                        }, 1000);

                });

                $("input:eq(2)").click(function() {

                    $("input:eq(0)").click();

                    $("input:eq(1)").click();

                });

                $("input:eq(3)").click(function() {

                    //恢复默认设置

                    $("div").css({

                        width: "",

                        fontSize: "",

                        borderWidth: ""

                    });

                });

            });

        </script>

        <input type="button" id="go1" value="Block1动画">

        <input type="button" id="go2" value="Block2动画">

        <input type="button" id="go3" value="同时动画">

        <input type="button" id="go4" value="重置">

        <div id="block1">Block1</div>

        <div id="block2">Block2</div>

以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。可以通过重置反复测试,熟悉animate()第二种形式。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS模拟自动点击的简单实例
Aug 08 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
jquery制作 随机弹跳的小球特效
Feb 01 #Javascript
jQuery实现单击和鼠标感应事件
Feb 01 #Javascript
jquery制作LED 时钟特效
Feb 01 #Javascript
thinkphp 表名 大小写 窍门
Feb 01 #Javascript
javascript实现带节日和农历的日历特效
Feb 01 #Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
javascript时区函数介绍
2012/09/14 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python多项式回归的实现方法
2019/03/11 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
小学语文教学反思
2014/02/10 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2014年度个人工作总结
2014/11/07 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书