Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但这不起作用。有什么想法吗？

Answer 1

在这种情况下，据我所知，$(this)是窗口。你想为$("p")本身设置动画，你需要根据它的宽度指定你的动画，而不是一般的DOM元素。您的对象中还有一个流氓;正在发送给animate函数（您可以在开发人员工具控制台中看到这样的错误）。

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>

Answer 2

如果我是你，我会在元素上切换一个类，并使用CSS的transform: translateX()和transition结合使用，将元素移出屏幕。

codepen

CSS

p {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

p.off-screen-right {
  transform: translateX(100%)
}

JS

$(document).ready(function () {
  $('button').click(function () {
    $('p').toggleClass('off-screen-right')
  })
})

Answer 3

步骤

获取<p>宽度并将其保存在变量中。
然后，将初始margin-left设置为$(window).width()
之后，您可以调用animate函数将margin-left设置为您最初在变量中保存的宽度的负值

工作代码

$(function() {
  var width = $("p").width();
  
  $("p")
    .css('margin-left', $(window).width())
    .animate({ 'margin-left': -width }, 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>

将marginLeft设置为元素的宽度

3 个答案:

步骤

工作代码