使用jquery从现有位置添加或减去一定数量的像素

Posted 2023-05-08

【中文标题】使用jquery从现有位置添加或减去一定数量的像素

【英文标题】：Add or Subtract a certain number of pixels from existing position using jquery

【发布时间】：2013-01-14 19:34:09

【问题描述】：

我正在为绝对定位的 div 设置动画。 “顶部”值是动态确定的，因此我需要使用 jquery 为动态“顶部”值设置 -20px 的动画。

$("#element").animate("top" : +-20);

显然以上是不正确的，但我需要简单地从 #element 已经拥有的任何“顶部”值中减去 20。我可以使用上面的语法吗？

例如，如果#element 有一个顶部：-300px，我需要最终结果为 -320px。

【参考方案1】：

你必须传递一个字符串，在你的号码前加上-=：

$("#element").animate( top: "-=20" );

【讨论】：

赞成，但请考虑使用 javascript 名称 .animate(top:'-=20')，而不是“top”。使用 javascript 名称意味着它不需要先解析字符串，处理速度更快。

@LifeInTheGrey - 我从来不知道它更快。你能指出一些来源/测试吗？

我设置了一个快速的jsPerf，一个item差别很小但是你做的事情越多加起来=jsperf.com/javascript-names-vs-strings-in-jquery

@LifeInTheGrey - 造成这种差异的原因是 jQuery 必须将 CSS 属性名称映射到它们的原生 DOM 属性名称。仅测试非蛇形大小写的属性名称会导致性能差异可以忽略不计：jsperf.com/javascript-names-vs-strings-in-jquery/2

嗯，很公平。所以你的意思是它与非蛇形属性没有区别，但对蛇形属性更好？那么使用本机 DOM 属性名称不是最佳实践吗？