javascript – 将marginLeft设置为元素的-width

我有一个带有长内联文本的元素,并希望制作动画,将此文本从屏幕右侧(窗口右边框后面的全文)移动到屏幕左侧.

我的想法是通过设置元素的margin-left到minus(width)来移动元素：

var element = $(this);
$("p").animate({
  'marginLeft': - element;
}, 4000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

但这不起作用.有任何想法吗？

解决方法:

在这种情况下,据我所知,$(this)就是窗口.你想为$(“p”)本身设置动画,你需要根据它的宽度来指定你的动画,而不是一般的DOM元素.还有一个流氓;在您发送到animate函数的对象中(您可以在Developer Tools控制台中看到这样的错误).

var $element = $("p");

$element.animate({
  'marginLeft': -($element.outerWidth())
}, 4000);

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  overflow-x: hidden; /* no horizontal scrollbar */
}
p {
  white-space: nowrap;
  background: #ccc;
  display: inline-block;
  margin-left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>element with long long long long inline text....</p>

编辑

或者,这里是纯CSS.如果您正在开发的浏览器支持它,那么这是更有效的途径.它导致浏览器“重绘”更少,并在GPU上运行,而不是像JS那样在CPU上运行.

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  overflow-x: hidden; /* no horizontal scrollbar */
}

@-webkit-keyframes offscreenLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@-moz-keyframes offscreenLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@-o-keyframes offscreenLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes offscreenLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

p {
  white-space: nowrap;
  background: #ccc;
  display: inline-block;
  padding-left: 100%; /* translate uses the inner width of the p tag, so the thing pushing it offscreen needs to be *inside* the p, not outside (like margin is) */
  
  -webkit-animation: offscreenLeft 4s forwards; /* Safari 4+ */
  -moz-animation:    offscreenLeft 4s forwards; /* Fx 5+ */
  -o-animation:      offscreenLeft 4s forwards; /* Opera 12+ */
  animation:         offscreenLeft 4s forwards; /* IE 10+, Fx 29+ */
}

<p>element with long long long long inline text....</p>

标签：javascript,jquery,css,animation,jquery-animate
来源： https://codeday.me/bug/20190722/1504101.html