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

jQuery动画与特效代码

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

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

锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情

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秒钟,改变一次效果。 

     });

   })

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

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery幻灯片效果实例代码、 JQuery循环滚动文字图片实、 怎样处理jQuery EasyUI 已打开、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery实现刮刮卡效果的实例代码和实现方法

下一篇:jQuery Position用法及兼容性详解

展开 +

收起 -

jQuery动画特效 相关内容
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

查看详情
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
jQuery动画特效 学习笔记
网友NO.558797

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

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

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

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

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 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757