Slide image with easing

Question

The idea is to have images that appear on the page in a sliding way (sliding into place) and that part I managed to make.

What I don't seem to be able to achieve is to add some kind of easing to them - for example the image should go faster in the beginning and slow down right before reaching its destination.

I have the first part working on my website, but in the fiddle I created nothing works - anyway, this is it: http://jsfiddle.net/Sf5jC/ :

HTML:

<div id="click-me">
    <div id="square"></div>
</div>

CSS:

#click-me {
  width: 1000px;
  height: 1000px;
}
#square {
  position: relative;
  left: 300px;
  height: 100px;
  width: 100px;
  background-color: orange;
}

JS:

$('#click-me').click(function (e) {
  e.preventDefault();
  $('#square').animate({
    left: 0
  }, 500);
});

Could somebody please give me a suggestion? I'm quite a newbie in jQuery.

Answer 1

As the commenter pointed out - you're missing jQuery from the fiddle which is why it doesn't work.

jQuery comes with 2 different easing options out of the box, swing (the default) and linear which as the name suggests is constant.

However, there's a really good library for different easing options that you can plug in - there's a link here and you can try out the different kinds on the page. Download it, include it in your website (after jQuery) and you can use the different easing methods.

To use easing in your code just add the type of easing after the duration. E.g.

$("#element").animate({"left":0},1000,"easingName");

Answer 2

In fiddle nothing works because you did not select any library for it to work

Take a look at fiddle now Fiddle

And how about something like this to slow down

Fiddle

$('#click-me').click(function (e) {
    e.preventDefault();
    $('#square').animate({
        left: 100
    }, 500);

    $('#square').animate({
        left: 0
    }, 1500);

});