Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery动画-以固定速度将DIV移动到X,Y位置

jQuery动画-以固定速度将DIV移动到X,Y位置
EN

Stack Overflow用户
提问于 2014-12-27 15:12:08
回答 2查看 4.5K关注 0票数 0

我当前的jQuery代码将元素移动到页面上的X和Y位置,但是无论距离如何,我都希望保持恒定的速度。

举个例子,如果我移动一段短距离,时间就会很慢。如果我移动到更远的地方,div会迅速射向位置,这不是我想要的,但我不知道如何改变这个位置。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myAvatar").offset({ top: y, left: x})

我正在使用上面的代码,我很想看看,不管元素移动的距离是多少,如何有固定的速度是可能的。

对不起,如果我说得很含糊,或者这个问题很难理解,我会很乐意澄清的。

编辑**

CSS是

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
transition: left 1.2s cubic-bezier(.42,-0.3,.78,1.25), top 1.2s cubic-bezier(.42,-0.3,.78,1.25);

过渡速度,1.2秒是我应该在这里修正的。我不知道如何在JavaScript/jQuery中动态地调整它,以达到相同的速度,无论X和Y点之间的距离如何。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-12-27 15:19:41

如果你想要一个恒速,那就用“线性”而不是“立方-贝塞尔(.)”

票数 0
EN

Stack Overflow用户

发布于 2014-12-27 15:14:17

您可以使用.animate()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myAvatar").animate({ top: y, left: x},1200);

1200只是一个持续时间,你可以用你喜欢的持续时间来改变它,但是在css中1200 =1.2

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27672325

复制
相关文章
定位div到窗口固定位置
代码来自网络~ /*任意位置浮动固定层*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv
苦咖啡
2018/04/28
2.5K0
jQuery滚动到页面指定位置
        在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数。
Tyan
2022/05/09
6.9K0
jQuery滚动到页面指定位置
Div 滚动条滚动到指定的位置[通俗易懂]
(“#container”).scrollTop((“#test4”).position().top +
全栈程序员站长
2022/09/14
3.7K0
jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部
在日常工作中难免会遇到一些滚动事件的应用,页面滚动到一定位置显示 返回顶部 按钮,header 头部 fixed 固定等,这时候就可以使用 scroll() 方法来实现我们的需求。
德顺
2019/11/12
6.6K0
jQuery中的一些事件以及动画
加载事件我们有两种方式,一种就是javascript直接写:window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})
用户10196776
2022/11/18
2.1K0
2019-08-09 满屏切换vue项目中使用 vue-fullpage.js
演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page"> <!--
用户4344670
2019/08/28
11.9K0
2019-08-09 满屏切换vue项目中使用 vue-fullpage.js
iOS动画之【添加商品到购物车】:将商品图片icon 移动到购物车iocn的位置
demo下载地址:https://download.csdn.net/download/u011018979/20045082
公众号iOS逆向
2023/09/11
2380
iOS动画之【添加商品到购物车】:将商品图片icon 移动到购物车iocn的位置
RecyclerView滚动到指定位置
1、mLayoutManager private void moveToPosition(int position) { if (position >= 0) { mLayoutManager.scrollToPositionWithOffset(3, 0); } } 2、LinearSmoothScroller mTopSmoothScroller = new TopSmoothScroller(getActivity()); priva
用户9854323
2022/06/25
1.7K0
怎么设置jQuery中的事件和动画
                1.1.3. 案例1:测试两种方式的区别【个数+顺序】 
天蝎座的程序媛
2022/11/18
2.4K0
Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文介绍了如何在Android平台上通过Matrix实现旋转动画,包括以X、Y、Z轴为中心进行旋转,以及使用自定义动画封装旋转操作。同时,还介绍了如何基于Matrix实现3D旋转,并给出了具体的示例代码。
用户1155943
2018/01/04
3.4K0
Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
06-移动端开发教程-fullpage框架
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。
老马
2018/04/02
5.1K0
06-移动端开发教程-fullpage框架
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例
老马
2018/02/18
5.1K0
如何将PostgreSQL数据目录移动到Ubuntu 18.04上的新位置
数据库随着时间的推移而增长,有时会超出原始文件系统的空间。当它们与操作系统的其余部分位于同一分区时,这也可能导致I / O争用。
大瓜皮
2018/10/19
2.3K0
JQuery Div scrollTop ScrollHeight
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
全栈程序员站长
2022/09/15
2.8K0
jQuery 编程 | jQuery 动画
jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。
闻说社
2022/08/10
6.1K0
杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)
D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比
杨校
2018/12/06
8.3K0
jQuery 动画
jQuery动画相关方法概况 方法 说明 实例 hide()和show() 隐藏和显示 HTML 元素。 $("#hide").click(function(){    
静默虚空
2018/01/05
2.8K0
Dragdealer拖动组件
官网: http://skidding.github.io/dragdealer/ https://github.com/skidding/dragdealer
pollyduan
2019/11/04
3.9K0
H5C3第四节
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
用户3461357
2019/08/02
5.3K0
H5C3第四节
JavaScript 动画_jquery 动画
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调。
全栈程序员站长
2022/11/04
2.4K0

相似问题

将div从x,y滑动到x,y?

11

将Div移动到悬停的Div的Y位置(JQuery)

32

以编程方式将UILabels移动到(X,Y)位置?

10

jQuery用x和y位置动画背景位置

13

Javascript或Jquery:滚动到固定位置div

34
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文