Fix Jerky Scriptaculous (Script.aculo.us) Animation Effects

I was adding some BlindDown, BlindUp animation effects to something I was working on today with Scriptaculous and had a bit of an issue with jerky animation. I’ve had this before and ended up ditching them but never really investigated why sometimes they are smooth as nobody’s business and others not.

As it happened, today, I had it working nicely, made a change, and the issue arose, thus leading me to the cause.

It turns out that if you add a BlindDown or BlindUp animation to a div that has padding or a margin set in its CSS as the effect begins to execute the div jumps to the padding/margin size and then the BlindUp/BlindDown (or probably others but I haven’t investigated) works on the remaining ‘area’ of the element.

So this is jerky:

<script language="javascript" type="text/javascript">
    Effect.BlindDown("divJerky");
</script>
<div style="height:50px; padding:10px; display:none" id="divJerky">

</div>

The solution is this:

<script language="javascript" type="text/javascript">
    Effect.BlindDown("divJerky");
</script>
<div style="display:none" id="divJerky">
    <div style="height:50px; padding:10px">
    </div>
</div>

If you add the padding to an ‘inner’ div all is well in the world again and everything works smoothly…

I know this isn’t exactly astrophysics but it is Friday afternoon and I’ve only just realised what the issue was so I thought I’d share…

Have a good weekend