PDA

View Full Version : jQuery Fx.frame (among others) problem



IGx89
4 Jun 2007, 9:22 AM
The problem is that the jQuery adapter doesn't handle "from" arguments in its animation method. It is most easily brought to light when using the Fx.frame method, because the animation element's left and top attributes default to auto and then jQuery chokes when trying to parseInt them.

Here's my partial, unoptimized fix for Ext v1.1b1 (in jquery-bridge.js, inside Ext.lib.Anim):


run : function(el, args, duration, easing, cb, scope, type){
var anim = createAnim(cb, scope);
var o = {};
for(var k in args){
switch(k){ // jquery doesn't support, so convert
case 'points':
var by, pts, e = Ext.fly(el, '_animrun');
e.position();
if(by = args.points.by){
var xy = e.getXY();
pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
}else{
pts = e.translatePoints(args.points.to);
}
o.left = pts.left;
o.top = pts.top;
if(!parseInt(e.getStyle('left'), 10)){ // auto bug
e.setLeft(0);
}
if(!parseInt(e.getStyle('top'), 10)){
e.setTop(0);
}
break;
case 'width':
o.width = args.width.to;
+ Ext.fly(el, '_animrun').setWidth(args.width.from);
break;
case 'height':
o.height = args.height.to;
+ Ext.fly(el, '_animrun').setHeight(args.height.from);
break;
case 'opacity':
o.opacity = args.opacity.to;
break;
+ case 'left':
+ o.left = args.left.to;
+ Ext.fly(el, '_animrun').setLeft(args.left.from);
+ break;
+ case 'top':
+ o.top = args.top.to;
+ Ext.fly(el, '_animrun').setTop(args.top.from);
+ break;
default:
o[k] = args[k].to;
break;
}
}
// TODO: find out about easing plug in?
jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
return anim;
}

perrich
11 Jun 2007, 12:24 PM
Thanks I will check it tomorow.

IGx89
24 Jul 2007, 7:32 AM
Jack, has this made it into SVN yet? It'd be nice to have in 1.1 final...

jack.slocum
25 Jul 2007, 2:22 AM
Thanks iGx89, I will do some testing with this!

jack.slocum
25 Jul 2007, 2:34 AM
Ok, I made some changes and it appears to work great. It was indeed the lack of "from". :)



run : function(el, args, duration, easing, cb, scope, type){
var anim = createAnim(cb, scope), e = Ext.fly(el, '_animrun');
var o = {};
for(var k in args){
if(args[k].from){
if(k != 'points'){
e.setStyle(k, args[k].from);
}
}
switch(k){ // jquery doesn't support, so convert
case 'points':
var by, pts;
e.position();
if(by = args.points.by){
var xy = e.getXY();
pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
}else{
pts = e.translatePoints(args.points.to);
}
o.left = pts.left;
o.top = pts.top;
if(!parseInt(e.getStyle('left'), 10)){ // auto bug
e.setLeft(0);
}
if(!parseInt(e.getStyle('top'), 10)){
e.setTop(0);
}
if(args.points.from){
e.setXY(args.points.from);
}
break;
case 'width':
o.width = args.width.to;
break;
case 'height':
o.height = args.height.to;
break;
case 'opacity':
o.opacity = args.opacity.to;
break;
case 'left':
o.left = args.left.to;
break;
case 'top':
o.top = args.top.to;
break;
default:
o[k] = args[k].to;
break;
}
}
// TODO: find out about easing plug in?
jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
return anim;
}