写插件时遇到的一个小问题,关于animate和css3的问题
昨天写代码时,偶然想到了如果我们把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的问题的更多相关文章
- 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <
html: 使用ajaxFileUpload插件做文件上传时,后台返回json格式的数据,js代码如下: 接下来,把结果错误信息打印出来: 先在网上找了下解决办法方案,stackoverflow上有说 ...
- 写MYSQL存储过程遇到的一个小BUG
DELIMITER $$ USE `income_new`$$ DROP PROCEDURE IF EXISTS `a`$$ CREATE DEFINER=`income_new`@`%` PROCE ...
- 使用 $(function(){}) 时遇到的一个小bug及解决方法
在 $(function(){}) 中声明函数,在 $(function(){}) 外调函数,会报错 原因: 页面加载后,会先执行 $(function(){}) 外面的语句,再执行 $(functi ...
- Go的List操作上的一个小“坑”
转自http://sharecore.net/blog/2014/01/09/the-trap-in-golang-list/ 一直想不清楚一个问题,简单设计的东西到底是“坑多”还是“坑少”呢? 复杂 ...
- VB.NET开发中遇到的一个小问题
在修改公司用vb.net的写的代码时,遇到一个小问题 页面上有一个button, ID是btnNext, 在属性页中,它的click事件对应的是cmdNext, 我像在c#中一样,在属性页中双击cmd ...
- 【jQuery】结合accordion插件分析写插件的方法及注意事项
1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对 ...
- UniversalImageLoader的一个小问题
最近在使用UniversalImageLoader时遇到了一个小问题,多个地方同时通过ImageLoader.getInstance().loadImage(url, new ImageSize(dp ...
- grep -P的一个小问题
用grep时,发现一个怪异的问题. 背景:grep -E表示用扩展的正则表达式.grep -P 表示用perl正则表达式,区别:http://www.cnblogs.com/wangkangluo1/ ...
- 用android去写一个小程序
前言: 软工的一个小作业:实现"黄金分割小游戏", 需要结对编程,队友:陈乐云 共用时两天. 早期思路设计: 采用键值对的形式,以Map作为存储结构.优点:能够将数据与用户对 ...
随机推荐
- 11g init DB software and database
oadmin->administrator2.169set ORACLE_HOME=C:\app\oracle\product\11.2.0\dbhome_1set ORACLE_SID=csm ...
- OpenGL红宝书例3.1 -- glBufferSubData使用
代码实现 1.1 C++部分 GLFWwindow *window; GLuint shader_program; GLuint VAO; void init() { static const GLf ...
- 【PHP伪静态】时获取不规则的URL参数
$url = explode('/', '/article/category-5/status-2/page-3'); $params = array(); foreach ($url as $v) ...
- flexigrid
一.参考资料 1.jQuery插件flexiGrid的完全使用,附代码下载 2.修改flexigrid源码一(json,checkbox)[原创] 3.jQuery +UI + flexigrid做的 ...
- Javascrpit学习之路一——基础知识
1.DOM 文档对象模型 定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容.结构和样式. 2.Javascript 区分大小写.弱类型语言 变量小写:va ...
- 简单日历,纯js
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Django -- static
和templates一样,Django会自动去各个app根目录中寻找叫static的目录,在该目录下创建一个和app同名的目录,用于存放静态文件(js, css. images...) 使用时,只需要 ...
- SEO优化之 主页上加上nofollow
<a href=http://www.主页.cn/ rel=”nofollow”>这里是锚文字</a> <光年日志分析系统>来分析抓取比较多的是哪个网页,没用的no ...
- PAT乙1001
我脑洞大了..... 以为是个找规律..... 原来只是模拟..... 我相信肯定是有规律的..... 但是我就是不愿意了..... #include<cstdio> #include&l ...
- Angular服务器通信之:$http
$http服务提供了浏览器XMLHttpRequest对象的封装,并且作为Angular中和后台服务通信的底层服务,在此之上Angular还提供了一个可选模块ngResource支持与RESTFul的 ...