Question

我们的想法是让图像以滑动的方式出现在页面上（滑入到位）以及我设法制作的部分。

我似乎无法实现的是为它们添加某种缓和效果 - 例如，图像应该在开始时更快，并在到达目的地之前减速。

我的第一部分是在我的网站上工作，但是在小提琴中我没有创造任何作品 - 无论如何，就是这样：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

在小提琴中没有任何作用，因为你没有为它选择任何library

现在看看小提琴 Fiddle

这样的事情如何放慢速度

<强> Fiddle

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

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

});

Answer 2

正如评论者指出的那样 - 你错过了小提琴中的jQuery，这就是为什么它不起作用。

jQuery带有2个不同的缓动选项，包括swing（默认值）和线性，顾名思义是不变的。

但是，有一个非常好的库可以插入不同的缓动选项 - 有一个链接here，您可以在页面上尝试不同类型。下载它，将它包含在您的网站中（在jQuery之后），您可以使用不同的缓动方法。

要在代码中使用缓动，只需在持续时间后添加缓动类型即可。 E.g。

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

使用缓动滑动图像

2 个答案: