Animate div using jQuery and changing the Width

Question

I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.

It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.

If you look at my output, the effect is not very seamless and it seems it stuck at some point. Because i'm animating the div within change the width, i'm sure there is a better way to do that.

Here is my code :

$(document).ready(function() {
    $("#thumbnails").animate({
        opacity: 1,
        width: "800px",
  }, {
    duration: 500,
    specialEasing: {
    width: "linear"
    }
  });
});

Here is the Output link

http://jsbin.com/cuvaxuji/1

Answer 1

Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write

  $("#thumbnails").animate({
        opacity: 1,
        left: "20px",
  }