当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery动画与特效详解

jQuery动画与特效代码

  • 发布时间:
  • 作者:码农之家
  • 点击:111

这篇文章主要知识点是关于jQuery、动画特效、jQuery之动画效果大全 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

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

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

jQuery之动画效果大全

下面介绍了几种动画效果的方法,具体如下:

1、show()显示效果

语法:show(speed,callback)  Number/String,Function speend为动画执行时间,单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。

 show(speed,[easing],callback)  Number/String  easing默认是swing,可选linear;    

$("#div1").show(3000,function(){ alert("动画显示完成!"); });  

    

2、hide()隐藏效果

语法:hide(speed,callback)  Number/String,Function

         hide(speed,easing,callback)  Number/String   

 $("#div1").hide(3000,function(){ alert("动画隐藏完成") });

 3、toggle()隐藏显示自动切换,当目前为显示则隐藏,当目前为隐藏则显示

语法:toggle(speed,callback)  Number/String,Function

   toggle(speed,callback)  Number/String,String,Function    

 $("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

4、slideDown()向下显示,slow()是水平与垂直方向同时展开,而slideDown是仅仅在垂直方向向下展开

语法:slideDown(speed,callback)  Number/String,Function

   slideDown(speed,[easing],callback)  Number/String,Function    

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

 5、slideUp()向上隐藏,  hide()是水平与垂直两个方向的,而slideUp()仅仅是垂直方向向上收起隐藏

语法:slideUp(speed,callback)  Number/String,Function

    slideUp(speed,[easing],callback)  Number/String,String,Function    

 $("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的,而slideToggle是仅仅垂直方向的。

语法:slideToggle(speed,callback)  Number/String,Function

        slideToggle(speed,[easing],callback)  Number/String,String,Function   

 $("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

7、fadeIn() 以改变透明度来显示

语法:fadeIn(speed,callback)    Number/String,Function

   fadeIn(speed,[easing],callback)  Number/String,Function    

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

8、fadeOut() 以改变透明度来隐藏

语法:fadeOut(speed,callback)     Number/String,Function

   fadeOut(speed,[easing],callcack)     Number/String,String,Function

 $("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

9、fadeToggle() 以改变透明度来切换显示隐藏状态

语法: fadeToggle(speed,callback)  Number/String,Function

   fadeToggle(speed,[easing],callback)    Number/String,Function 

 $("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

 10、fadeTo() 由指定的时间将透明度改变到指定的透明度

语法:fadeTo(speed,callback)    Number/String,Function

 fadeTo([speed],opacity,[easing],[fn])  Number/String,Float,String,Function

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

 11、animate() 自定义动画,一般来说数字变动都可以用于动画。

语法:animate(params,speed,easing,callback);  样式参数,时间,可选择,函数    

$("#div1").animate({ width:300px,height,300px },3000);

其中params要用中括号括起来,可以使用的css样式参数。注意要采用骆驼法则,如font-size要写成fontSize。颜色渐变不支持。

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12、stop() 停止正在执行动画

 stop([clearQueue],[gotoEnd]);  两个参数均为布尔值,第一个表示,是否停止动画执行、第二个表示,如果停止,是否立即变为执行完成的状态,如果设置为否,则停留在执行一半的状态。 

$("#div1").hide(5000)  //此动画正在执行

  $("#div1").stop();    //上一行代码指定的动画停止在一半状态

  $("#div1").stop(true,true);  //停止当前动画,同时动画切换到完成执行状态。

 13、delay() 延迟执行动画  当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可,不过没有延时效果。  

delay(duration,[queueName])  设置一个延迟值来执行动画  Integer,String

  $("#div1").delay(3000).hide(3000);  //表示在3000毫秒后执行hide(3000);

 14、jQuery.fx.off//该属性只是是否关闭当前页面上的动画,关闭动画之后,没有动画效果,所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同。  

$(function(){

    jQuery.fx.off = true;  //属性在事件外面,对页面加载后执行的所有动画有效

    $("#div1").click(function(){  //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画

      $("#div1").hide(3000);  //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide();

     });

  })

 15、jQuery.fx.interval  //该属性设置动画的帧速,单位是毫秒,如果设置的时间越小,就越平滑。,属性出现的位置同样有影响范围 

  $(function(){

    jQuery.fx.interval = 1000;

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

      $("#div1").hide(3000);   //jQuery.fx.interval设置为1000,也就是1秒钟,改变一次效果。 

     });

   })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery动画特效 相关电子书
学习笔记
网友NO.392476

jQuery实现鼠标悬停3d菜单展开动画效果

竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单。 采用jQuery和CSS3实现。支持Chrome,火狐,Edge等浏览器。 效果图: 代码如下: !DOCTYPE htmlhtmlheadmeta charset="utf-8"meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"titlejQuery鼠标悬停3d菜单展开动画 - 何问起/titlebase target="_blank" /link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/93/css/index.css"/headbodydiv class="wrap" div class="logo" h1a href="javascript:;" target="_self"img src="http://hovertree.com/themes/hvtimages/hovertree.png"/a/h1 /div p鼠标移入侧边栏,二级菜单3D展开br/鼠标hover背景变色br /鼠标移入二维码背景变色/p div a href="http://hovertree.com/"何问起/a a href="http://hovertree.com/h/bjag/clwkm5fc.htm" 说明/a /div/divdiv class="nav-main"div class="nav-box"div class="nav" ul class=……

网友NO.254023

jQuery动画_动力节点节点Java学院整理

用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。 但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用,那考虑的事情就更多了。 使用jQuery实现动画,代码已经简单得不能再简化了:只需要一行代码! 让我们先来看看jQuery内置的几种动画样式: show / hide 直接以无参数形式调用show()和hide(),会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画: var div = $('#test-show-hide');div.hide(3000); // 在3秒钟内逐渐消失 时间以毫秒为单位,但也可以是'slow','fast'这些字符串: var div = $('#test-show-hide');div.show('slow'); // 在0.6秒钟内逐渐显示 toggle()方法则根据当前状态决定是show()还是……

网友NO.144817

jQuery实现菜单感应鼠标滑动动画效果的方法

本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下: 此代码测试环境为IE9 以及GG、FF浏览器,IE8及以下浏览器可能不支持,希望理解。 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果。 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title非常不错的jQuery鼠标滑动效果/title script src="js/jquery.min.js" type="text/javascript"/script style body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,……

网友NO.914486

jQuery实现的模仿雨滴下落动画效果

本文实例讲述了jQuery实现的模仿雨滴下落动画效果。分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高、下落速度(即动画执行时间)、left随机的div。 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/}.com{ border-radius: 0 50% 50% 50%; background: skyblue; transform: rotate(45deg); position: absolute; top: 0;} 2.JS: $(function(){ var obj={ maxW:100,//最大宽度 minW:10,//最小宽度 maxSpeed:10000,//最大速度,单位ms creat:400//创建雨滴个数的快慢,单位ms } rain(obj)})function rain(obj){ var maxW=obj.maxW; var minW=obj.minW; var maxSpeed=obj.maxSpeed; var time=obj.creat; var maxLeft=$(window).width(); var time1; var j=0; time1=setInterval(function(){ var width=Math.random()*maxW;//随机宽度 width=width.toFixed(2); if(widthminW){ width=minW; } var left=Math.random()*maxLeft-width;//随机left值 left=left.toFixed(2); if(left0){ left=0; } j++; var spee……

网友NO.267818

jQuery实现的导航动画效果(附demo源码)

本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上。 效果如下图: 利用jquery的 animate 函数,很好实现。代码很简单! 代码如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" title测试/title script src="jquery-1.9.1.min.js"/script/headbodydiv class="nav" a class="active" href="#"首页/aa href="#"产品/aa href="#"新闻中心/aa href="#"关于我们/aa href="#"联系我们/aa href="#"首页/aa href="#"首页/adiv class="line"/div/divstyle.nav{ position:relative;}.nav a{ padding:10px 20px; border-bottom:solid 3px #fff; text-decoration: none; color:#666;}.nav a:hover{ color:#66f;}.nav .active, .nav .active:hover{ color:#f33;}.nav .line{ position:absolute; border-top:solid 2px red; width:0; left:0; top:0;}/stylescriptfunction navLine(o, bo){ var x = '' + (o.position().top + o.outerHeigh……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757