写插件时遇到的一个小问题,关于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)")
} );

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

时间: 2024-10-07 00:15:43

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

今天和组内一起写代码时碰到了一个关于命名冲突的问题,最后用js命名空间的方法解决的。

//第一步,首先创建一个全局变量,可以放在自己的js方法库中方便以后用,这个就是用来注册命名空间的方法. ns = function(namespace){ var arr = namespace.split('.');  //将传入的字符串如"com.test.lzn"以'.'隔开做成一个数组 var strNamespace = ""; //这个是为了保存每一步循环进去的包名 for(var i=0;i<arr.length;i++) { if(i!=0)

CSS3实现一个小风车【纯DOM+CSS3】

前言 用CSS3实现了一个小风车的效果...转转转,挺简单.. 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小风车-转啊转</title> <style type="text/css"> html { font-size: 10px; } html * {

使用simple json时遇到的一个小问题

发现问题 最近写了个程序,在构建http参数的时候使用到了org.json.simple.JSONObject这个类,上线之后有客户反馈说http参数格式不正确,如果参数中包含斜杠(/)则前面都会自动加上一个反斜杠(). 调查问题 发现问题之后首先去看了一下simple json的源代码,在他的源码中发现如下一段: public static void writeJSONString(Map map, Writer out) throws IOException { if(map == null

python3实现多组输入时遇到的一个小问题

不加异常捕捉就会多输出一个空行 加上异常捕捉之后就会不多输出一个空行 比赛时还是要加上异常捕捉比较好 原文地址:https://www.cnblogs.com/wkqweizhi/p/12346770.html

设定CentOS的网络时碰到的一个小问题

安装了CentOS6.4,设定好网络之后,但是网络不好使. ethtool eth0报错' Settings for eth0: Cannot get device settings: No such device Cannot get wake-on-lan settings: No such device Cannot get message level: No such device Cannot get link status: No such device No data availa

【JavaScript基础】在写冒泡排序时遇到的JavaScript基础问题:JavaScript的数据类型和变量赋值时的原理

写冒泡排序时,遇到一个问题: function bubbleSort(arr){ var temp = 0; console.log("传入的数组:"); console.log(arr); for(var i = 0;i<arr.length;i++){ //循环arr.length-1次 console.log("外层第"+i+"次循环===============start"); for(var j = 0;j<arr.leng

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

1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对象 4.结尾加分号,插件头部最好也加分号 5.插件应该返回一个jQuery对象,保证插件的链式操作 6.插件内部应用完整的jQuery而不是$,但可以利用闭包,将jQuery传入,使插件内部可以继续使用$符合作为jQuery别名 7.闭包另一大好处:可以避免内部变量影响全局空间 :(function

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

在修改公司用vb.net的写的代码时,遇到一个小问题 页面上有一个button, ID是btnNext, 在属性页中,它的click事件对应的是cmdNext, 我像在c#中一样,在属性页中双击cmdNext,自动进入.vb后台代码,产生事件 Protected Sub cmdNext(sender As Object, e As System.EventArgs) Handles btnNext.Click //一些处理代码 End Sub 运行debug调试时,发现这个代码会执行两次,怎么都

一个小效果引出的兼容性探讨

最近在做个小效果,没想到引出了几个以前的没认真去自己探讨的兼容问题,最后虽然这个效果还是不是很满意,但在这里想分享一下过程 首先想做的效果是 每次点击页面时,出现一个小波纹,然后自动消失 可以先看一下demo 到最后实现后,发现这个效果实用性不是很高,但是过程引出了一些值得积累的问题 引出知识点: transition的兼容支持 事件兼容 transitionend的兼容 如果我out了,请点击关闭 首先看一下 transition 的兼容性 1 <span style="font-siz