r2506 - animateClass works now with custom-effect plugins like backgroundPosition, clip etc.
Author: a.farkas.pm
Date: Sun May 10 09:16:12 2009
New Revision: 2506
Added:
branches/dev/effects/tests/visual/animateClass/external.html
branches/dev/effects/tests/visual/animateClass/jquery.backgroundPosition.js
branches/dev/effects/tests/visual/animateClass/logo_jquery.gif
(contents, props changed)
Modified:
branches/dev/effects/ui/effects.core.js
Log:
animateClass works now with custom-effect plugins like backgroundPosition,
clip etc.
Added: branches/dev/effects/tests/visual/animateClass/external.html
==============================================================================
--- (empty file)
+++ branches/dev/effects/tests/visual/animateClass/external.html Sun May 10
09:16:12 2009
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI animateClass Test Suite</title>
+ <title>CSS -> JS</title>
+ <style type="text/css">
+ body {
+ margin: auto;
+ width: 900px;
+ }
+ .box {
+ height: 300px;
+ border: 1px solid #c00;
+ background: #0f1923 url(logo_jquery.gif) no-repeat 10px 10px;
+ }
+ .bg-position {
+ background-position: 670px 230px;
+ }
+ </style>
+ <script src="../../../jquery-1.3.1.js"></script>
+ <script src="../../../ui/effects.core.js"></script>
+
+ <script src="jquery.backgroundPosition.js"></script>
+ <script>
+ (function($){
+ $(function(){
+ var box = $('div.box');
+ $('button')
+ .click(function(){
+ var className = this.className;
+ box.toggleClass(className, 400);
+ });
+ });
+ })(jQuery);
+ </script>
+ </head>
+ <body>
+ <button class="bg-position">animate background-position</button>
+
+ <div class="box">
+
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
Added:
branches/dev/effects/tests/visual/animateClass/jquery.backgroundPosition.js
==============================================================================
--- (empty file)
+++
branches/dev/effects/tests/visual/animateClass/jquery.backgroundPosition.js
Sun May 10 09:16:12 2009
@@ -0,0 +1,57 @@
+/**
+ * @author Alexander Farkas
+ * v. 1.1
+ */
+
+(function($){
+
+ if(!document.defaultView || !document.defaultView.getComputedStyle){
+ var oldCurCSS = jQuery.curCSS;
+ jQuery.curCSS = function(elem, name, force){
+ if(name !== 'backgroundPosition' || !elem.currentStyle ||
elem.currentStyle[ name ]){
+ return oldCurCSS.apply(this, arguments);
+ }
+ var style = elem.style;
+ if ( !force && style && style[ name ] ){
+ return style[ name ];
+ }
+ return oldCurCSS(elem, 'backgroundPositionX', force) +' '+
oldCurCSS(elem, 'backgroundPositionY', force);
+ };
+ }
+})(jQuery);
+
+(function($) {
+
+ function toArray(strg){
+ strg = strg.replace(/left|top/g,'0px');
+ strg = strg.replace(/right|bottom/g,'100%');
+ strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
+ var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|
pt)/);
+ return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
+ }
+
+ $.fx.step. backgroundPosition = function(fx) {
+ if (!fx.bgPosReady) {
+
+ var start = $.curCSS(fx.elem,'backgroundPosition');
+ if(!start){//FF2 no inline-style fallback
+ start = '0px 0px';
+ }
+
+ start = toArray(start);
+ fx.start = [start[0],start[2]];
+
+ var end = toArray(fx.options.curAnim.backgroundPosition);
+ fx.end = [end[0],end[2]];
+
+ fx.unit = [end[1],end[3]];
+ fx.bgPosReady = true;
+ }
+
+ var nowPosX = [];
+ nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] +
fx.unit[0];
+ nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] +
fx.unit[1];
+ fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
+
+ };
+})(jQuery);
\ No newline at end of file
Added: branches/dev/effects/tests/visual/animateClass/logo_jquery.gif
==============================================================================
Binary file. No diff available.
Modified: branches/dev/effects/ui/effects.core.js
==============================================================================
--- branches/dev/effects/ui/effects.core.js (original)
+++ branches/dev/effects/ui/effects.core.js Sun May 10 09:16:12 2009
@@ -198,15 +198,20 @@
for (var n in opts[i].newStyle) {
if (opts[i].newStyle[n] !== oldStyle[i][n] /* Only values
that have changed are used for the animation */ &&
!blacklist[n] && !n.match(/^pos|^pixel/)) {
+ //can we animate it?
if(dimStyles[n] && (opts[i].newStyle[n] === 'auto' ||
(opts[i].newStyle.display === 'none'))){ // handle height/width
opts[i].animateStyles[n] = opts[i].element[n]();
} else if(n == 'filter' &&
opts[i].newStyle[n].indexOf('opacity=') !== -1){ // handle filter opacity
opts[i].animateStyles.opacity =
parseInt(opts[i].newStyle[n].match(/opacity=([^)]*)/)[1], 10) / 100;
- } else if (( !isNaN(parseInt(opts[i].newStyle[n], 10)) &&
opts[i].newStyle[n].match(/\s|,/) === null &&
- oldStyle[i][n].match(/\s|,/) === null) ||
- ($.fx.step[n] && !blacklistValues[opts[i].newStyle[n]])) /* Only
things that can be parsed to integers or we have a animate-Plugin for this
*/ {
+ } else if(($.fx.step[n] && !blacklistValues[opts[i].newStyle[n]])){
// we have an animate-Plugin for this
+ opts[i].animateStyles[n] = (!isNaN( parseInt(opts[i].newStyle[n],
10) ) && opts[i].newStyle[n].match(/\s|,/) !== null) ?
+ '('+ opts[i].newStyle[n] +')' :
+ opts[i].newStyle[n];
+ } else if ( !isNaN(parseInt(opts[i].newStyle[n], 10)) &&
opts[i].newStyle[n].match(/\s|,/) === null &&
+ oldStyle[i][n].match(/\s|,/) === null) {// Only things that can be
parsed to integers and don´t have a whitespace
opts[i].animateStyles[n] = opts[i].newStyle[n];
}
+
}
}
@@ -260,7 +265,7 @@
that.hasClass(value.toggle) ? value.remove = value.toggle :
value.add = value.toggle;
}
- var cacheID = 'aninmateClass-add'+ value.add + '-remove'+ value.remove,
+ var cacheID = 'aninmateClass-'+ value.add + '-'+ value.remove,
cachedStyles = (opt.cacheStyles) ? that.data(cacheID) : false,
options = cachedStyles || createOptions(that, oldStyleAttr, elements),
len = options.length,