javascript - 滑动图像缓动

Question

我的想法是让图像以滑动方式(滑入到位)出现在页面上，而这部分是我设法制作的。

我似乎无法实现的是向它们添加某种缓动 - 例如，图像应该在开始时走得更快，在到达目的地之前放慢速度。

我的网站上有第一部分，但在我创建的 fiddle 中没有任何效果 - 无论如何，就是这样: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);
});

有人可以给我一个建议吗？我是 jQuery 的新手。

Answer 1

在 fiddle 中没有任何工作，因为你没有选择任何 library 让它工作

现在看看 fiddle Fiddle

像这样的东西放慢速度怎么样

Fiddle

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

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

});