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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
学习Angularjs分页指令
Jul 01 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
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中解析带中文字符的url函数分享
2015/01/20 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
js 小数取整的函数
2010/05/10 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
python 实现插入排序算法
2012/06/05 Python
python中self原理实例分析
2015/04/30 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python查看模块安装位置的方法
2018/10/16 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
J2EE面试题
2016/03/14 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
党员学习十八大感想
2014/01/17 职场文书
战友聚会邀请函
2014/01/18 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
签约仪式策划方案
2014/06/02 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
python实现自定义日志的具体方法
2021/05/28 Python
python blinker 信号库
2022/05/04 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
详解SQL报错盲注
2022/07/23 SQL Server