diff --git a/Rakefile b/Rakefile
index d73416b3d..06de5d152 100644
--- a/Rakefile
+++ b/Rakefile
@@ -6,6 +6,7 @@ ZEPTO_DIST_DIR = File.join(ZEPTO_ROOT, 'dist')
ZEPTO_FILES = [
File.join(ZEPTO_SRC_DIR,'zepto.js'),
+ File.join(ZEPTO_SRC_DIR,'fx.js'),
File.join(ZEPTO_SRC_DIR,'touch.js'),
File.join(ZEPTO_SRC_DIR,'ajax.js')
]
diff --git a/src/fx.js b/src/fx.js
new file mode 100644
index 000000000..d26e952a0
--- /dev/null
+++ b/src/fx.js
@@ -0,0 +1,8 @@
+(function($){
+ $.fn.anim = function(props, dur, ease){
+ var transforms = [], opacity, k;
+ for (k in props) k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')');
+ return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''),
+ '-webkit-transform': transforms.join(' '), opacity: opacity });
+ }
+})(Zepto);
\ No newline at end of file
diff --git a/src/zepto.js b/src/zepto.js
index f97f2853f..6bcabe4a9 100644
--- a/src/zepto.js
+++ b/src/zepto.js
@@ -67,10 +67,6 @@ var Zepto = (function() {
index: function(el){
return this.dom[IO]($(el).get(0));
},
- anim: function(transform, opacity, dur){
- return this.css({'-webkit-transition':'all '+(dur||0.5)+'s',
- '-webkit-transform':transform,'opacity':(opacity===0?0:opacity||1)});
- },
bind: function(event, callback){
return this(function(el){
event.split(/\s/).forEach(function(event){ el[AEL](event, callback, false); });
diff --git a/test/fx.html b/test/fx.html
new file mode 100644
index 000000000..9b31021a8
--- /dev/null
+++ b/test/fx.html
@@ -0,0 +1,38 @@
+
+
+
+ Zepto FX unit tests
+
+
+
+
+
+
+ Zepto FX unit tests
+
+ See the browser console for results.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/zepto.html b/test/zepto.html
index f5c62d626..3b1a858c5 100644
--- a/test/zepto.html
+++ b/test/zepto.html
@@ -19,6 +19,8 @@ Zepto DOM unit tests
nay
+
+
@@ -247,6 +249,19 @@ Zepto DOM unit tests
t.assertEqual('2px', $('#some_element').css('padding-left'));
},
+ testAnim: function(t){
+ var el = $('#animtest').get(0);
+
+ $('#animtest').anim({
+ translate3d : '100px, 100px, 100px',
+ rotateZ : '90deg',
+ opacity : 0.5
+ }, 2, 'ease-out');
+ t.assertEqual('translate3d(100px, 100px, 100px) rotateZ(90deg)', el.style.webkitTransform);
+ t.assertEqual('ease-out', el.style.webkitTransitionTimingFunction);
+ t.assertEqual('0.5', el.style.opacity);
+ },
+
testHtml: function(t){
var div = $('div.htmltest');
div.html('yowza');