jq和css动画有什么区别,动画与jQuery一个CSS变换(Animating a CSS transform with jQ
我想动画一个div,并把它绕Y轴180度。 当我把下面的代码,我得到一个jQuery错误:
$("#my_div").animate({
"transform": "rotateY(180deg)",
"-webkit-transform": "rotateY(180deg)",
"-moz-transform": "rotateY(180deg)"
}, 500, function() {
// Callback stuff here
});
});
它说:“遗漏的类型错误:无法读取属性未定义的‘默认视图’”,并说这是在jQuery的文件本身......我究竟做错了什么?
Answer 1:
您也可以预定义旋转的CSS类,并使用jQuery添加/删除类:
CSS:
#my_div {
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.rotate {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
jQuery的:
$("#my_div").addClass('rotate');
Answer 2:
试试这个:
$('#myDiv').animate({ textIndent: 0 }, {
step: function(go) {
$(this).css('-moz-transform','rotate('+go+'deg)');
$(this).css('-webkit-transform','rotate('+go+'deg)');
$(this).css('-o-transform','rotate('+go+'deg)');
$(this).css('transform','rotate('+go+'deg)');
},
duration: 500,
complete: function(){ alert('done') }
});
http://jsfiddle.net/RPSzb/2/
Answer 3:
jQuery的不能动画转换属性开箱。 但是你可以用动画自定义属性.animate()使用,做转型“手动” step功能 :
var $myDiv = $("#my_div"),
ccCustomPropName = $.camelCase('custom-animation-degree');
$myDiv[0][ccCustomPropName ] = 0; // Set starting value
$myDiv.animate({ccCustomPropName : 180},
{
duration: 500,
step: function(value, fx) {
if (fx.prop === ccCustomPropName ) {
$myDiv.css('transform', 'rotateY('+value+'deg)');
// jQuery will add vendor prefixes for us
}
},
complete: function() {
// Callback stuff here
}
});
见这琴的工作示例(点击蓝色方框)。
这类似于不确定的答案 ,但它不滥用真正的CSS属性。
注:自定义属性的名称应该是一个jQuery.camelCase()的名称,因为.animate()在内部使用的名字驼峰,因此,将存储使用驼峰格式名称的属性的当前值和fx.prop也将是驼峰的名字。
Answer 4:
忘了jQuery的$.animate()而是使用$.velocity() Velocity.js是jQuery的的动画推广。 它使用相同的语法jQuery和允许你CSS3动画等3D变换,平移,旋转,颜色褪色,转换,歪斜,......你要什么。 而且由于它是足够聪明,而不是使用JS CSS3如果可能的话,它有更好的表现藏汉动画。 我不明白为什么jQuery的不这样做呢!
http://julian.com/research/velocity/
文章来源: Animating a CSS transform with jQuery
jq和css动画有什么区别,动画与jQuery一个CSS变换(Animating a CSS transform with jQ相关推荐
- JS动画和CSS动画之间的区别和特点?
一.写在前面 之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题.现在我们来详细了解一下CSS和JS动画之间的区别和特点. 二.CSS动画 优点: 1.浏览器可 ...
- [练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式 网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
- jQuery操作css样式、属性、动画、节点
css样式操作: 1.设置单个样式: css(name, value) 2.设置多个样式:css(obj) 3.获取样式:css(name) <!DOCTYPE html> <htm ...
- python做flash帧动画_[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式 网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
- CSS过渡,转换与动画
目录 过渡(transition) 转换(transform) 什么是转换 二维坐标系 移动(translate) 用translate实现居中 旋转(rotate) 设置旋转中心点 缩放(scale ...
- css 跳跃动画,如何使用纯CSS实现方块跳跃的动画(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...
- css动画 和 js动画_CSS大师的动画建议
css动画 和 js动画 Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoin ...
- CSS知识点汇总(六)--垂直居中动画实现方式
文章目录 1. CSS 垂直居中有哪些实现方式? 2.css加载会造成阻塞吗? 3. 前端实现动画有哪些方式? 1. CSS 垂直居中有哪些实现方式? 在布局一个页面时,通常都会用到水平居中和垂直居中 ...
- css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论 震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...
最新文章
- 使用jquery 根据下拉列表的name值查找被选中的值
- 云计算,能回答地球最终流浪到哪里吗?
- python读取文件-python读取大文件
- mySQL双机冗余_MySQL双机热备实现原理
- Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Find/undo事件)
- unity3d 自动变化大小_一种可扩展的Unity3d资源检查方式
- 1809企业战略管理
- Springboot2 自定义异常处理
- http请求过程_“HTTP请求的整个过程”与它引出了整个计算机网络知识图谱(一)...
- 线程中消费者生产者的实例代码(synchronized关键字)
- 如何把DEBIAN变成UBUNTU-DESKTOP最少化安装
- 声波的时域和频域Python实现示例
- 多测师肖sir__ui分层
- Windows cmd命令行操作技巧
- 应用在夜灯领域的环境光测距感器芯片
- Java提取成对括号内容 支持扩展多种括号
- ACWING297. 赤壁之战(树状数组dp)
- 为什么我从PR里面导出来的视频,在电脑上播放是正常的,微信发给朋友后,形状就变了,扭曲了一样的
- 数组连接中的vstack()函数与hstack()函数
- c# serialPort.DataReceived无法被触发接收数据