jQuery效果

一、基本效果 显示与隐藏(通过控制宽高实现)
　　1.show() - 显示
　　　　* 无参版本 - 不具有动画效果
　　　　* show(speed,callback)有参版本 - 具有动画效果
　　　　* speed - 设置动画执行的时长,单位为毫秒
　　　　　　* 三个预定义值 - slow|normal|fast
　　　　* callback - 当动画执行完毕后执行的函数
　　2.hide() - 隐藏
　　　　* 无参版本 - 不具有动画效果
　　　　* hide(speed,callback)有参版本 - 具有动画效果
　　3.toggle() - 隐藏-显示切换

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

         /*

          * show()方法 - 显示

          * * show()无参版本 - 不具有动画效果

          * * show(speed,[callback])有参版本 - 具有动画效果

          *   * speed - 设置动画执行的时长,单位为毫秒

          *     * 三个预定义值 - slow|normal|fast

          *   * callback - 当动画执行完毕后的函数

          */

         $("div").show('slow',function(){

             alert('xxx');

         });

     });

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

         /*

          * hide()方法 - 隐藏

          * * hide()无参版本 - 不具有动画效果

          * * hide(speed,callback)有参版本 - 具有动画效果

          *   * speed - 设置动画执行的时长,单位为毫秒

          *     * 三个预定义值 - slow|normal|fast

          *   * callback - 当动画执行完毕后的函数

          */

         $("div").hide(1000,function(){

             alert("yyy");

         });

     });

     //toggle()

     function move(){

         $("div").toggle(3000,function(){

             move();

         });

     }

     move();

二、滑动显示效果
　　1.slideDown() - 向上滑动
　　　　* 可以不传递参数 - 底层具有默认时长
　　　　* 执行的效果依然具有动画效果
　　　　* slideDown(speed,callback)
　　2.slideUp() - 向下滑动
　　　　* slideUp()
　　　　* slideUp(speed,callback)
　　3.slideToggle() - 向下-向上滑动切换

三、淡入淡出
　　1.fadeIn() - 淡入
　　　　* 可以不传递参数 - 底层具有默认时长
　　　　* 执行的效果依然具有动画效果
　　　　* fadeIn(speed,callback)
　　2.fadeOut() - 淡出
　　　　* 可以不传递参数 - 底层具有默认时长
　　　　* 执行的效果依然具有动画效果
　　　　* fadeOut(speed,callback)
　　3.fadeTo() -

 /*

          * fadeTo(speed,opacity,callback)

          * * speed - 设置动画执行的时长,单位为毫秒

          * * opacity - 设置当前元素的透明度(0-1)

          *   * 0 - 透明

          *   * 1 - 不透明

          */

         $("div").fadeTo(3000,0.5);

四、自定义动画
1.animate(params,[duration],[easing],[callback])
2.animate(params,options)

示例：

 // 并发与排队效果

 // 并发效果 - 多个动画效果同时执行

 // 排队效果 - 多个动画效果按照先后顺序执行

 <style>

     div {

         width : 200px;

         height : 200px;

         border : solid 1px black;

         background : pink;

         position : relative;

         top : 50px;

         left : 10px;

     }

   </style>

  </head>

  <body>

   <button>执行动画</button>

   <br><br>

   <div></div>
     $("button").click(function(){

         /*

          * animate(params,duration,easing,callback)

          * * params - 设置动画执行的样式(CSS的属性)

          *   * 写法 - { attrName : attrValue}

          * * duration - 设置动画执行的时长,单位为毫秒

          *   * 三种预定义值 - slow|normal|fast

          * * easing - 要使用的擦除效果的名称(不使用)

          * * callback - 当动画执行完毕后的函数

          */

         // 并发效果 - 同时执行

         $("div").animate({

             "width" : 50,

             "height" : 50

         },3000);

         // 排队效果 - 按照先后顺序执行

         $("div").animate({

             "width" : 50,

             "opacity" : "0.4"

         },3000).animate({

             "height" : 50

         },3000).animate({

             "left" : 200

         },3000).animate({

             "top" : 200,

             "opacity" : "1"

         },3000);

     });

     //

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

         /*

          * animate(params,options)

          * * params - 设置动画的样式(CSS属性)

          *   * 写法 - {attrName:attrValue}

          * * options - 选项

          *   * 写法 - {name:value}

          *   * 选项

          *     * duration - 设置动画执行的时长

          *     * easing - 要使用的擦除效果的名称

          *     * complete - 动画执行完毕后的函数

          *     * queue - 设定为false将使此动画不进入动画队列

          */

         $("div").animate({

             "width" : 50

         },{

             "duration" : 3000

         }).animate({

             "height" : 50

         },{

             "duration" : 3000,

             "queue" : false

         });

     });

jQuery基本动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  10. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. 软工2017第六周团队协作——个人PSP

    10.20 --10.26本周例行报告 1.PSP(personal software process )个人软件过程. 类型 任务 开始时间                结束时间 中断时间 实际用 ...

  2. 软件工程课堂作业（三）——Right-BICEP软件单元测试

    一.测试方法:Right-BICEP Right-结果是否正确?B-是否所有的边界条件都是正确的?I-能查一下反向关联吗?C-能用其他手段交叉检查一下结果吗?E-你是否可以强制错误条件发生?P-是否满 ...

  3. 关于GenericJDBCException的问题

    在spring和hibernate整合的初步阶段,还没有编辑hibernate.cfg.xml这个文件,只有一个beans.xml文件.此时遇到了一个bug. Exception in thread ...

  4. iOS- Swift实现UITableView的常见操作

    1.前言   Swift在这就不多介绍了,想必大家都已皆知. 离Swift面世也过了有一个多月的时间. 在闲暇时间我用Swift实现了UITableView的一些常见操作. 基本都是可以用上的,今天在 ...

  5. 《Effective C#》快速笔记（六）- - C# 高效编程要点补充

    目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 四十九.实现与 CLS 兼容的程序集 五十.实现小尺寸.高内聚的程序集 这是 ...

  6. 求熵 python 代码

    #coding=gbk import nltk import math def entropy(labels): freqdist = nltk.FreqDist(labels) #Frequency ...

  7. 牛客网 提高组第8周 T2 推箱子 解题报告

    推箱子 链接: https://ac.nowcoder.com/acm/contest/176/B 来源:牛客网 题目描述 在平面上有\(n\)个箱子,每个箱子都可以看成一个矩形,两条边都和坐标轴平行 ...

  8. nodejs创建多层目录

    1. fs.mkdir不能一次创建多层目录,必须先创建上层目录,再创建下层目录 //同步 fs.mkdirSync("./tmp/"); fs.mkdirSync("./ ...

  9. 【树形DP】【UVA10859】 Placing Lampposts

    传送门 Description 给定一个\(n\)个点\(m\)条边的无向无环图,选择尽量少的节点,使得所有边都至少有一个顶点被选择.在这个基础上,要求有两个顶点被选择的边数尽可能大 Input 多组 ...

  10. Widows与linux关于隐形文件和非隐形文件の对比

    Widows与linux关于隐形文件和非隐形文件の对比 对于windows来说 ,它本身有一些隐藏文件,为了防止一些菜鸟不小心把电脑的主要文件删除,还有就是里面存放一些你不知道的后门. 对此我们一些同 ...