1. 根据id改变字体大小的动画

    <div class="speech">样式切换</div>
    <div id="switcher">
    <button id="switcher-large">click me</button>
    </div>
    var $speech=$("div.speech");
    var defaultSize=$speech.css("fontSize");
    $("#switcher button").click(function(){
    //alert("123")
    var num=parseFloat($speech.css("fontSize"),10);
    //alert(num); //弹出默认字体大小16
    switch(this.id){
    case 'switcher-large':
    num *= 1.4;
    break;
    case 'switcher-small':
    num /= 1.4;
    break;
    default:
    num=parseFloat(defaultSize,10); }
    $speech.animate({fontSize:num+"px"},"slow")
    })
  2. 淡入淡出
  3. $("p").hide();
    $("a").click(function(){
      $("p").animate({
        opacity:'toggle',  //淡入淡出的效果
        height:'toggle'    //由上到下的显示效果
        },"slow");
    })

jquery动画基础的更多相关文章

  1. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  2. jquery动画,基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  3. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  4. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  5. jQuery动画使用总结

    jQuery动画我用的比较多的仅仅只有show和hide,但是作为一个被我们大多数人所熟知的框架,相信他的动画功能还是比较多样的,这里做个小总结. 1.jQuery animate(),用于创建自定义 ...

  6. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  7. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  8. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  9. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

随机推荐

  1. 获取Python安装目录

    >>> import sys>>> path=sys.executable>>> print (path)C:\Users\jumz-G\AppD ...

  2. 4Web Service中的几个重要术语

    4.1WSDL: web service definition language 直译:Webservice定义语言 1.对应一种类型的文件.wsdl 2.定义了webservice的服务端与客户端应 ...

  3. js 的闭包

    今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...

  4. curl_init函数用法

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网 页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并 ...

  5. Linux之 sort,uniq,cut,wc命令详解

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  6. php之XML转数组函数的方法

    <?/** * xml2array() will convert the given XML text to an array in the XML structure. * Link: htt ...

  7. 导出db2数据库的表结构和数据(转载)

      对于db2数据库,导入和导出表结构和数据其实很简单,只需要用到db2look和db2move两个命令即可.这两个命令都需要在客户端的命令行处理器 中执行,但对于数据库服务器和客户端不在同一机器上的 ...

  8. 连续最短路算法(Successive Shortest Path)(最小费用最大流)

    #include <cstdio> #include <cstring> #include <queue> #include <vector> #inc ...

  9. [课程设计]Sprint Two 回顾与总结&发表评论&团队贡献分

    [课程设计]Sprint Two 回顾与总结&发表评论&团队贡献分 ● 一.回顾与总结 (1)回顾 燃尽图: Sprint计划-流程图: milestones完成情况如下: (2)总结 ...

  10. HTML5的数据自动补齐功能

    使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...