jQuery动画与特效详解

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()第二种形式。

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

(0)

相关推荐

  • jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

    本文实例讲述了jquery实现动画菜单的左右滚动.渐变及图形背景滚动等效果.分享给大家供大家参考.具体如下: 这里演示基于jquery实现的动画菜单,内含四种效果的网站菜单,第一种是不带效果的传统导航菜单,第二种是带有图形滚动背景的菜单,第三种是由右向左背景滚动的菜单,第四种则是背景色渐变的网站菜单,每一种都很精彩,喜欢Js菜单的可模仿借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-cha-men

  • jQuery实现的背景颜色渐变动画效果示例

    本文实例讲述了jQuery实现的背景颜色渐变动画效果.分享给大家供大家参考,具体如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

    本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法.分享给大家供大家参考,具体如下: jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <html> <head> <meta

  • jQuery下的动画处理总结

    queue()/ dequeue()这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知.这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码 复制代码 代码如下: $('#test').animate({            "width": "300px",            "height": "300px",            "opacity":&qu

  • jQuery实现的文字hover颜色渐变效果实例

    本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j

  • 基于jquery的direction图片渐变动画效果

    还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv

  • JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:

  • jQuery与js实现颜色渐变的方法

    本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理 先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜

  • jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码 代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码 代码如下: <

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jQuery热气球动画半透明背景的后台登录界面代码分享

    本文实例讲述了jQuery实现热气球动画背景登录框.分享给大家供大家参考.具体如下: jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码.页面效果简洁大方,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <head> <meta http-equ

随机推荐