昨天写代码时,偶然想到了如果我们把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. Stu Website

    GIT: 分支的新建与合并 https://git-scm.com/book/zh/v2/Git-分支-分支的新建与合并 分支的管理 https://git-scm.com/book/zh/v1/Gi ...

  2. centos 6.5常见lib库安装

    在CentOS安装软件的时候,可能缺少一部分支持库,而报错.这里首先安装系统常用的支持库.那么在安装的时候就会减少很多的错误的出现. # yum install -y gcc gdb strace g ...

  3. Android sdk content loader

    方法一(关闭后重启): 遇到Eclipse右下角一直显示“Android sdk content loader 0%”的情况时,直接关掉Eclipse,有ADB进程在运行时通过进程管理器结束进程,然后 ...

  4. Android OpenGL ES(六)创建实例应用OpenGLDemos程序框架 .

    有了前面关于Android OpenGL ES的介绍,可以开始创建示例程序OpenGLDemos. 使用Eclipse 创建一个Android项目 Project Name: OpenGLDemos ...

  5. less分页阅读

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  6. runtime关联属性示例

    前言 在开发中经常需要给已有的类添加方法和属性,但是Objective-C是不允许给已有类通过分类添加属性的,因为类分类是不会自动生成成员变量的.但是,我们可以通过运行时机制就可以做到了. 本篇文章适 ...

  7. UIImagePikerController 浅析

    原文链接:http://www.jianshu.com/p/2ac85aca4468 UIImagePickerController是iOS系统提供的和系统的相册和相机交互的一个类,可以用来获取相册的 ...

  8. 用for、while、do-while循环输出10句“好好学习,天天向上!”

    #include "stdio.h" void main() { int time; ;time<=;time++) printf("%d.好好学习,天天向上!\n ...

  9. Android中获取网络数据时的分页加载

    //此实在Fragment中实现的,黄色部分为自动加载,红色部分是需要注意的和手动加载,    蓝色部分是睡眠时间,自我感觉不用写  ,还有就是手动加载时,不知道为什么进去后显示的就是最后一行,求大神 ...

  10. Linux学习 -- Shell编程 -- 正则表达式

    正则表达式与通配符 正则 -- 匹配字符串 -- 包含匹配     grep.awk.sed等 通配符 -- 匹配文件名 -- 完全匹配  ls.find.cp等 基础正则表达式