昨天写代码时,偶然想到了如果我们把css3属性放在animate中,指定时间。能否实现动画呢。举个例子吧:

<script>
$(".box").animate({
"-webkit-transform":"rotate(90deg)"
},1000);
</script>

  如上代码,box会在一秒种从0deg旋转到90deg吗?答案是否定的。

  于是我查了下jquery的手册,发现animate的第一参数中确实不能放css3的属性。于是乎怎么办呢?

我在stackoverflow上发现了一个技巧,来用js操作css3属性动画。当然有人要问了,用animation不就好了吗?问题是,animation过于死板了,并且只能用在一个对象上。如果我在改变。box的属性时,还要同时改变另一个box2的css,用animation就不行了。

  那么,我们换一种方式利用jquery的animation函数。

$({property:0}).animate({property:100},
{
duration:500;
step:$(".box").css("
-webkit-transform
","rotate("+this.property/100*90+"deg)")
} );

  其实现在有些网站上的激光加载条,就是通过这种方式做的。

写插件时遇到的一个小问题,关于animate和css3的问题的更多相关文章

  1. 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <

    html: 使用ajaxFileUpload插件做文件上传时,后台返回json格式的数据,js代码如下: 接下来,把结果错误信息打印出来: 先在网上找了下解决办法方案,stackoverflow上有说 ...

  2. 写MYSQL存储过程遇到的一个小BUG

    DELIMITER $$ USE `income_new`$$ DROP PROCEDURE IF EXISTS `a`$$ CREATE DEFINER=`income_new`@`%` PROCE ...

  3. 使用 $(function(){}) 时遇到的一个小bug及解决方法

    在 $(function(){}) 中声明函数,在 $(function(){}) 外调函数,会报错 原因: 页面加载后,会先执行 $(function(){}) 外面的语句,再执行 $(functi ...

  4. Go的List操作上的一个小“坑”

    转自http://sharecore.net/blog/2014/01/09/the-trap-in-golang-list/ 一直想不清楚一个问题,简单设计的东西到底是“坑多”还是“坑少”呢? 复杂 ...

  5. VB.NET开发中遇到的一个小问题

    在修改公司用vb.net的写的代码时,遇到一个小问题 页面上有一个button, ID是btnNext, 在属性页中,它的click事件对应的是cmdNext, 我像在c#中一样,在属性页中双击cmd ...

  6. 【jQuery】结合accordion插件分析写插件的方法及注意事项

    1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对 ...

  7. UniversalImageLoader的一个小问题

    最近在使用UniversalImageLoader时遇到了一个小问题,多个地方同时通过ImageLoader.getInstance().loadImage(url, new ImageSize(dp ...

  8. grep -P的一个小问题

    用grep时,发现一个怪异的问题. 背景:grep -E表示用扩展的正则表达式.grep -P 表示用perl正则表达式,区别:http://www.cnblogs.com/wangkangluo1/ ...

  9. 用android去写一个小程序

    前言: 软工的一个小作业:实现"黄金分割小游戏", 需要结对编程,队友:陈乐云    共用时两天. 早期思路设计: 采用键值对的形式,以Map作为存储结构.优点:能够将数据与用户对 ...

随机推荐

  1. Oracle10 多行和并

    SELECT fspc, wmsys.wm_concat (jsrzmc) as jsr FROM dxjsrxx GROUP BY fspc select fspc, LISTAGG(jsrzmc, ...

  2. xmlHTTP技术资料

    一.数据库远程管理技术 基于互联网的广域网现代应用中的一个重要环节是数据库远程监控.首先简单回顾一下互联网上的数据库远程管理技术的发展过程和方式: 早期通过编写CGI-BIN程序模块进行数据库远程管理 ...

  3. Spring中实现监听的方法

    在未使用框架进行编程的时候,我们常常在web.xml中加上这样一段话 <listener> <listener-class>XXX</listener-class> ...

  4. spring @Autowired或@Resource 的区别

    1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配(这个注解是属于spring的),默认情况下必 ...

  5. Java中的五种单例模式实现方法

    [代码] Java中的五种单例模式实现方法   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ...

  6. ubuntu中安装myeclipse提示Insufficient Memory解决方法

    经过查看资料发现出现这个问题的原因是因为计算机中swap分区的内存不足,或者没有创建swap分区,google中http://www.bkjia.com/webzh/1003601.html提供了一种 ...

  7. [转]Android 如何对sqlite数据库进行增删改[insert、update和delete] 操作

    import android.content.ContentValues; import android.content.Context; import android.database.Cursor ...

  8. parseint和parsefloat总结number。隐形转换

    parseint:会认识一些字符+.-.空格,其他的就会截止譬如23hudhchauch结果为:23,对于boollen类型不能转换为1或是0. number:是对整体的转换.对true的转换为1. ...

  9. 完美解决ie8以下不兼容h5的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  10. ZOJ 3939The Lucky Week<模拟/暴力>

    题意:我们认为日期的天数为1,11,21,并且是周一的为Lucky Week;现在给出第一个lucky week的日期,求第N个的lucky week: //1:四百年一轮回,从闰年和平年的判定可以推 ...