why is jquery easing not so smooth

Question

I have a image that I ease into view with jQuery.

<style>

#box
{
    position:relative;
    left:-400px;
    height:50px;
    width:100px;
}

</style>


$(document).ready(function()
    {
     var method;

     $("#clickme").toggle(function()
     {
      method = $("#box").attr("class");
      $("#box").animate({left:"50%"},{duration: 1000,easing: method});

     },function()
     {
      method = $("#box").attr("class");
      $("#box").animate({left:"-400px"},{duration: 1000,easing: method});
     });
    });

It is about 400x600px and the rendering of the image sliding in is smooth but chunky.

It will during the animation look like this at times:

|          |
|          |
  |          |
  |          |
|          |
|          |

If | are the edges of the image.

Is this just because of my browsers/computers rendering capabilities? Chrome/FF/Safari on a Netbook.

Answer 1

It looks like you're running into the limitations of your browser/hardware combination. Keep in mind that javascript animations depend highly on the capabilities of the computer and javascript engine of your browser.

Something that looks good on a high end workstation probably won't look all that great on a low end laptop.

Answer 2

Are you running any Flash on the same page?

If so, I've had a few problems mixing Jquery and Flash on the same page and they can have large performance hits. Usually, the Flash is transparent to really hit the computer however.

To clarify, does the image 'jump' as it loads or is the image itself loading poorly? If it jumps, it could be a simple CSS problem - which can be solved if I can see what you have for your CSS. If not and it's the image, Justin might have solved it for you. Are you able to test on a more powerful computer?