$(document).ready(function(){
            $('#swticher-large').click(function(){
                var $speech = $('div.speech');
                var currectSize = $speech.css('fontSize');
                var num = parseFloat(currectSize,10);   //parseFloat()函数会将字符串转换为几进制数字,还会去掉结尾的非数字字符
                var unit = currectSize.slice(-2);     //.slice()方法返回字符串中从指定的字符开始的一个子字符,此处指从倒数第二个字符开始取,即px.
                num*=1.4;
                $speech.css('fontSize',num+unit);
            });
        });

通过$('div.speech').css('fontSize')可以取得当前字体大小,不过由于返回的值中既包含数字值与包含度量单位,所以需要把这两部分保存到各自的变量中,在乘出新的字体大小后,再重新加上单位。

创建自定义动画效果

.animate()方法可控制很多属性,它接受四个参数:

1.一个包含样式属性及值得映射

2.可选的速度参数,即可是预置字符串(slow,normal,fast)也可是一个毫秒数值。

3.可选的缓动类型

4.可选的回调函数

例:

$(document).ready(function(){

  $('div.label').click(function(){

    $('div.button').animate({left:500,height:38},'slow');      //使按钮向右移的同时高度增加到38,速度为缓慢

$('div.button').animate({left:500},'slow')

            .animate({height:38},'slow')

            .fadeTo('slow',0.5)

            .slideUp('slow');      //使按钮排队实现效果,即先将按钮向左移动再增加高度再将透明度减退为0.5最后将它们滑到最上方隐藏它们

  });

});

很多效果有可能是同时发生的也有可能是排队发生的,对此总结:

(1)一组元素上的效果:

  1.当在一个.animate()方法中以多个属性的方式应用时,是同时发生的。

  2.当以方法连缀的形式应用时,是按顺序发生的(排队效果)。

(2)多组元素上的效果:

  1.默认情况下是同时发生的。

2.当在事件处理程序的回调函数中应用时,是按顺序发生的(排队效果)。

修改内联CSS(点击按钮连续改变文字大小、位置,.animate()方法)的更多相关文章

  1. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  2. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  3. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  4. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  5. css点击按钮,依次动态展开面板动画效果

    <a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...

  6. 进阶版css点击按钮动画

    1. html <div class="menu-wrap"> <input type="checkbox" class="togg ...

  7. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  8. 点击按钮如何改变当前窗口的url

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css 两边是线,中间文字的多种实现方法

    <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> < ...

随机推荐

  1. 连接弹性和命令拦截的 ASP.NET MVC 应用程序中的实体框架

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    上篇博客我们学习了EF 之 MVC 排序,查询,分 ...

  2. MVC中的JS和CSS压缩

    小说一下Js和CSS压缩的好处: 1.减小了文件的体积 2.减小了网络传输量和带宽占用 3.减小了服务器的处理的压力 4.提高了页面的渲染显示的速度  很多建议将站点的静态文件(如图片.js.css ...

  3. matlab中imresize

    matlab中函数imresize简介: 函数功能:该函数用于对图像做缩放处理. 调用格式: B = imresize(A, m) 返回的图像B的长宽是图像A的长宽的m倍,即缩放图像. m大于1, 则 ...

  4. AJAX-----08jsonp跨域请求

    jsonp跨域请求其实我个人感觉并非传统上的ajax,因为传统的ajax几乎都是采用了xmlhttprequest这个对象来进行发送数据或者接收数据而已, 而jsop是通过双方约定成一个接口文件,然后 ...

  5. 如何拥有一个自己的Vagrant box

    这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...

  6. XML 与 DataSet/DataTable 互相转换实例(C#)——转载

    // <summary>      /// XML形式的字符串.XML文江转换成DataSet.DataTable格式      /// </summary>      pub ...

  7. Runnable和Thread的区别 (转)

    在java中可有两种方式实现多线程,一种是继承 Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thread类同时覆写了本类中的 run ...

  8. oracle分区提高篇

      一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Or ...

  9. 运用C#生成docx格式的报表

    这几天在北京做一个大桥的监测系统的项目,涉及到一个功能,那就是采集数据,处理后,希望能自动生成一个报表,只需要在一个模板的基础上加几个数就可以了,但因为希望生成的是.docx格式的word2007/2 ...

  10. manacher浅析

    manacher算法的输入是一个字符串,可以计算出以每个字符为中心的最长回文子串的半径.为了避免讨论奇数偶数,将原串的每两个字母之间以及前后各加一个特殊字母,比如'#',那么对于abcbb就变成了 # ...