jquery实现css3动画
jquery animate改变元素样式时，只支持数字值的变化，比如width，height等，但是css3属性状态值很多都不是数字值，而是字符串和数字混合在一起，比如translate(), rotate()等等，如果要用animate使其支持css3变化，需要用到一个step参数，下面附上小demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<style>
.demo{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<button>sss</button>
<div class="demo"></div> <script>
var $elem,applyEffect;
$elem=$(".demo");
applyEffect=function($e,v){
$e.css({
'-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
, '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
, 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
});
};
applyEffect($elem, 100);
$("button").click(function(){
$(".demo").animate({
foo:100
},{
step:function(now,fx){
//console.log(now); //当前正在改变的属性的实时值
//console.log(fx); //jquery默认动画队列的名字
//console.log(fx.elem); //执行动画的元素
//console.log(fx.prop); //执行动画的属性 aa
// console.log(fx.now); //正在改变属性的当前值
// console.log(fx.end); //动画结束之 360
//console.log(fx.unit); //改变的属性的单位 px
//$(".demo").css({"transform":"rotate("+now+"deg)"});
applyEffect($elem, 100-now);
},
duration:1000
});
});
</script>
</body>
</html>
现在animate第一个参数里，插入一个字段，给到设定好的目标值，然后在step里用css来通过前面给的字段，来动态模拟动画，通过这样间接的方式实现了animate对css3动画的支持.
jquery实现css3动画的更多相关文章
- jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- jQuery Animation实现CSS3动画
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性. 个元素来实现鼠标滑动到某个导航的背 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 一款jquery和css3实现的卡通人物动画特效
之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- 16款创建CSS3动画的jQuery插件
jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...
随机推荐
- python 中字典实用操作
1.字典转化为列表 a={"username":"12","password":"89"} print a.items( ...
- nginx.conf 解释
http://snapshot.sogoucdn.com/websnapshot?ie=utf8&url=http%3A%2F%2Fwww.cszhi.com%2F20120513%2Fngi ...
- unity自带寻路Navmesh入门教程（一）
说明:从今天开始,我阿赵打算写一些简单的教程,方便自己日后回顾,或者方便刚入门的朋友学习.水平有限请勿见怪.不过请尊重码字截图录屏的劳动,如需转载请先告诉我.谢谢! unity自从3.5版本之后,增加 ...
- JAVA OO 第二章知识点
一.JAVA的基础语法 1.关键字 ①关键字:关键字用于定义该门语言,且这些单词对编译器用特殊的含义,而且不能作为标识符. 2.标识符 标识符:在JAVA中我们备选的单词,包括:类名.方法名.字段.变 ...
- easyui datagrid 分页
//初始化dategrid $('#tt').datagrid({ url:null, pagination:true, pageSize:, pageNumber:, rownumbers:true ...
- Java EE : 三、图解Session（会话）
目录 Java EE : 一.图解Http协议 Java EE : 二.图解 Cookie(小甜饼) Java EE : 三.图解Session(会话) 概述 一.Session由来 二.Sessio ...
- 用PHP解析类JSON字符串为数组的实现
题目:把字符串嵌套关系转换成数组,字符串只包含成对中括号.数字和逗号字符串:(1,(1,2,(1,(1,2,(1)),3)),3,(1,(1,2,((1((1,(1,2,(1,2,3),4,5),3) ...
- F2.Net工作流引擎系列索引
索引如下 F2工作流引擎遵循参考WFCM标准规范,符合中国国情特色,更轻量级的工作流引擎,支持多种数据库(mmsqlserver,mysql,oracle),有强大智能的组织模型接口可快速应用到任何基 ...
- clearfix清除浮动
首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...
- 关于java对Excel的读取
/*注意:读取的Excel文件 请另存为2003版本的Excel,否则可能会报错别忘记导入第三方的jar包*/package com.zzp.ExcelParse;import jxl.Cell;im ...