views:

202

answers:

0

Hi,

I'm experiencing a strange error in IE on this site: http://www.davenuttall.co.uk

The fund-raising barometer on the left-hand side animates upwards to the correct position just fine in all other browsers, but throws an 'invalid argument' error in IE.

I think it's caused by the easing method - easeOutElastic - from the easing plugin (gsgd.co.uk/sandbox/jquery/easing/) as changing to a different method works ok (but isn't as good visually). Changing the value of the fundsRaised variable sometimes gets rid of the error but not always. Changing the duration of the second animation from 2000 to something a lot lower also sometimes works, but not always!! ARgH.

The javascript is located just before the closing body tag on the site, but here's the relevant snippet from the document.ready event (the problem is on the #thermo2 animation):

 function thermoCalc(howMuch){
 //first animations on "top" css are just to fake a delay... finer control than by using callbacks
   var theHeight = Math.floor((13.5*(25000-howMuch) / 1000) + 27);
  theHeight.toString() + "px";
  $('#total').animate({top:"19px"},1700).animate({left:"8px"},1200,'easeOutElastic');
  $('#thermo2').animate({top:"23px"},800).animate({height:theHeight},2000,'easeOutElastic');
 };

 var fundsRaised = $('#total dt span').html();
 thermoCalc(fundsRaised);

And here's the easeOutElastic method in all its unpacked glory:

    easeOutElastic: function (x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}

Have I missed anything obvious?

Thanks for looking, James

EDIT... I think I've narrowed it down further - by changing the duration to something really long it becomes obvious that the error is triggered when the #thermo2 div becomes less than 1px high.