Question

I’m trying to use the Easing plugin in order to get rid of the awful jumps and stuttering in my slideDown() effects:

    $('.message').each(function (index) {
        var t = $(this);
        t.hide();
        t.slideDown(3000, 'easeOutQuad');
    });

The effect is still just as choppy, and I noticed 6 instances of the following message in VS 2010:

's' is already defined

coming from the jquery.easing.1.3.js file.

I can’t imagine that what the message is referring to would be lousing things up, but I can’t figure out what else might be the problem.

Is anyone using the Easing plugin successfully with jQuery-1.4.3 ? Is there something else that I’m overlooking, or a workaround that I’m unaware of?

Update

I’ve duplicated the “jump” here

It seems the problem crops up as soon as multiple lines per div are introduced.

Answer 1

If you look at the source, the warnings are coming from a few easing methods where s is redefined. For example, look at easeOutElastic:

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;
},

Note that s is defined in the 2nd line and the redefined on the 4th and 5th lines. I can’t determine a reason for the redefinition of s and removing the superfluous “var” keywords in the 4th and 5th lines doesn’t affect the easing method as far as I can tell. The warnings appear harmless.

I have created a jsFiddle and don’t see any great degree of choppiness in FF4b6, IE8, or Chrome9.

http://jsfiddle.net/TbwPT/

Maybe not as smooth as might be desirable, but my visual impression is that this is due to limitations WRT having to render or not render full pixels. As the easing slows, you’ll see entire rows of pixels popping in. This is a limitation of how browsers position text as opposed to the easing function. e.g. You can’t position a at top=3.5px left=2.9px. I suspect that if you want a smoother animation, you’ll have to take a look at animating text on a <canvas>.

UPDATE: Taking a look at your jsFiddle (http://jsfiddle.net/hPred/) with multiple lines per div, it looks like the animation is having problems determining the correct final height of the div when it is left unspecified. It properly animates from zero to the height of a single line and then pops to the full height of the div. If you specify the height, it properly animates from zero to the final div height. The following trick works to set the div height:

$('.message').each(function (index) {
    var t = $(this);
    t.height(t.height());  // Read the computed height and then set it explicitly
    t.hide();
    t.slideDown(3000, 'easeOutQuad');
});

This now animates properly for me… http://jsfiddle.net/hPred/3/