I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.

My idea is to move element by setting margin-left to minus(width) of element:

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

<script src=".1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.

My idea is to move element by setting margin-left to minus(width) of element:

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

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

But this does not work. Any ideas?

• javascript
• jquery
• css
• animation
• jquery-animate

3 Answers 3

In that context, as far as I can tell, $(this) is the window. You want to animate the $("p") itself, and you need to specify you're animating based on it's width, not the general DOM element. There also was a rogue ; in your object that you were sending to the animate function (you can see errors like this in your Developer Tools Console).

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

EDIT

Or, here it is with pure CSS. This is the more effective route to take, if the browsers you're developing for support it. It causes the browser to "repaint" less, and runs on the GPU instead of CPU like JS does.

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>

If I were you, I would toggle a class on the element and using CSS's transform: translateX() bined with transition to move the element off screen.

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')
  })
})

Steps

• Get the <p> width and save it in a variable.
• Then, sets the initial margin-left to the $(window).width()
• After that, you can call the animate function to set the margin-left to the negative value of the width you've saved in the variable initially

Working code

$(function() {
  var width = $("p").width();
  
  $("p")
    .css('margin-left', $(window).width())
    .animate({ 'margin-left': -width }, 4000);
});

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