CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
momciloo
momciloo

Reputation: 937

Animate marginLeft to element's -width

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.com/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?

Upvotes: 3

Views: 1279

Answers (3)

allicarn
allicarn

Reputation: 2919

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.com/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>

Upvotes: 5

Buzinas
Buzinas

Reputation: 11733

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

Upvotes: 2

azium
azium

Reputation: 20634

If I were you, I would toggle a class on the element and using CSS's transform: translateX() combined 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')
  })
})

Upvotes: 3

Related Questions