Animate marginLeft to element's -width

Animate marginLeft to element's -width

本文关键字：-width marginLeft to element Animate      更新时间：2023-09-26

我有一个长内联文本的元素，我想制作动画，将这个文本从屏幕右侧(整个文本在窗口右边框后面)移动到屏幕左侧

我的想法是通过将margin-left设置为- (width) element来移动元素:

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函数(你可以在你的开发人员工具控制台看到这样的错误)。

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>

如果我是你，我会在元素上切换一个类，并使用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')
  })
})

步骤

  • 获取<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>

相关文章：