【前言】
今天有个同事问了道问题,jquery的动画想实现转换类效果,发现无效。。。
【主体】
首先w3c中展示的animate的支持属性:
所以这是jquery本身代码库的问题,animated方法中没有封装transform属性
解决方案:
(1)css方法
$($sub).animate({},5000,function(){ $(this).css({'transform':'translateX(300px)'}); })
在动画函数的回调函数里执行。时间和效果就没了意义,毕竟函数是在动画完成之后才有调用
(2)addClass方法
可以通过addClass()方法来代替此动作:
比如想旋转一个icon
在css中加入一个class
.add_transform{ transform:rotate(180deg); -ms-transform:rotate(180deg);/* IE9 */ -moz-transform:rotate(180deg);/* Firefox */ -webkit-transform:rotate(180deg);/* Safari和Chrome */ -o-transform:rotate(180deg);/* Opera */ transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;/*Firefox 4 */ -webkit-transition:all 0.5s ease-in-out;/* Safari和Chrome */ -o-transition:all 0.5s ease-in-out;/* Opera */ }
然后通过$(“选择器”).toggleClass(“.add_transform”);来使icon的旋转变为动画效果。
(3)下载补丁(加一个js文件):
注意:该方法只支持rotate的2D旋转,无法实现rotateX、rotateY、rotateZ的3D旋转。
https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
用法:
Animate rotate and scale CSS transforms independently using jQuery's animate() method. Animate使用jQuery独立旋转和缩放CSS变换 Examples: $('#example').animate({rotate: '30deg', scale: '1.25'}, 1000); $('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000);
注意:位置放到jquery下面引入
补丁:
/*! /** * Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS * scale and rotation independently. * https://github.com/zachstronaut/jquery-animate-css-rotate-scale * Released under dual MIT/GPL license just like jQuery. * 2009-2012 Zachary Johnson www.zachstronaut.com */ (function ($) { // Updated 2010.11.06 // Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions. This broke the features of this jQuery patch in Firefox 16. It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg. To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated. The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules. You will have to explicitly set the starting scale/rotation value. function initData($el) { var _ARS_data = $el.data('_ARS_data'); if (!_ARS_data) { _ARS_data = { rotateUnits: 'deg', scale: 1, rotate: 0 }; $el.data('_ARS_data', _ARS_data); } return _ARS_data; } function setTransform($el, data) { $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')'); } $.fn.rotate = function (val) { var $self = $(this), m, data = initData($self); if (typeof val == 'undefined') { return data.rotate + data.rotateUnits; } m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/); if (m) { if (m[3]) { data.rotateUnits = m[3]; } data.rotate = m[1]; setTransform($self, data); } return this; }; // Note that scale is unitless. $.fn.scale = function (val) { var $self = $(this), data = initData($self); if (typeof val == 'undefined') { return data.scale; } data.scale = val; setTransform($self, data); return this; }; // fx.cur() must be monkey patched because otherwise it would always // return 0 for current rotate and scale values var curProxied = $.fx.prototype.cur; $.fx.prototype.cur = function () { if (this.prop == 'rotate') { return parseFloat($(this.elem).rotate()); } else if (this.prop == 'scale') { return parseFloat($(this.elem).scale()); } return curProxied.apply(this, arguments); }; $.fx.step.rotate = function (fx) { var data = initData($(fx.elem)); $(fx.elem).rotate(fx.now + data.rotateUnits); }; $.fx.step.scale = function (fx) { $(fx.elem).scale(fx.now); }; /* Starting on line 3905 of jquery-1.3.2.js we have this code: // We need to compute starting value if ( unit != "px" ) { self.style[ name ] = (end || 1) + unit; start = ((end || 1) / e.cur(true)) * start; self.style[ name ] = start + unit; } This creates a problem where we cannot give units to our custom animation because if we do then this code will execute and because self.style[name] does not exist where name is our custom animation's name then e.cur(true) will likely return zero and create a divide by zero bug which will set start to NaN. The following monkey patch for animate() gets around this by storing the units used in the rotation definition and then stripping the units off. */ var animateProxied = $.fn.animate; $.fn.animate = function (prop) { if (typeof prop['rotate'] != 'undefined') { var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); if (m && m[5]) { $self = $(this); data = initData($self); data.rotateUnits = m[5]; } prop['rotate'] = m[1]; } return animateProxied.apply(this, arguments); }; })(jQuery);
.
.
相关推荐
jquery animate网站banner动画效果是一款基于jquery css3 animate属性制作的网站banner动画演示效果代码。
jquery animate图片模向滑动示例,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
jquery animate小用例,jquery animate小用例
昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的。...接下来通过本篇文章给大家介绍基于jquery animate操作css样式属性小结,对jquery animate css相关知识感兴趣的朋友一起学习吧
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
jquery animate分页标签按钮鼠标悬停滑动展开分页按钮 jquery animate分页标签按钮鼠标悬停滑动展开分页按钮
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery animate事件卷轴打开动画效果
脚本简介jquery animate分页按钮是一款鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩。
jqueryanimate图片无缝滑动javascript网页特效,轮播广告,无缝轮播,精简代码,一看就懂
通过 jquery animate 制作图片模向滑动特效,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。
jquery animate图片模向滑动imgs_v1.0
一个简单的图片放大效果基于jquery animate函数,很简单的,自己可以修改一下用。jquery文件通用自己改一下链接文件。
前端项目-egjs-jquery-transform,从jquery animate()方法扩展而来的方法。它支持CSS转换属性和3D加速。
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
jquery-animateNumber 数字动画插件 提供js和css文件,需求可以直接下载下来使用
jQuery animate滑动收缩展开时间轴大事记发展历程