javascript - 滑动图像缓动

标签 javascript jquery css sliding easing

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

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

我的网站上有第一部分,但在我创建的 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 的新手。

最佳答案

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

现在看看 fiddle Fiddle

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

Fiddle

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

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

});

关于javascript - 滑动图像缓动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23263602/

相关文章:

javascript - 如何伪造 jquery.ajax() 响应?

javascript - <table/> 内的 Bootstrap-datetimepicker 未正确显示

javascript - 有人可以帮助我使用带有动态元素的 CSS/jQuery 固定 header 吗?

javascript - 网络请求 API : How to get the requestId of a new request?

javascript - 根据变量创建本地存储计数器(无开关功能)

javascript - CORS 和 Google Maps Places 自动完成 API 调用

jquery - 如何使用 jquery ajax 调用传递 Web 服务的用户名和密码?

css - 将鼠标悬停在输入类型按钮上时,默认的十六进制/rgb/颜色是什么?

css - 导航下拉菜单上的 IE 7 z-index 问题

javascript - 如何首先将输入字段设置为只读,然后单击 vuejs 中的按钮使其可编辑?