I have been trying using jquery animate to do a running text. But I can't seems to get it run in an endless loop. It always runs one time only..

/*  js:  */

$(document).ready(function(){
  function scroll() {
    $('.scroll').animate({ 
      right: $(document).width() 
    }, 8000, scroll); 
  }
  scroll();
});

/* css： */

.scroll {
  position: absolute;
  right: -200px;
  width: 200px;
}

<!-- html: -->

<div class="scroll">This text be scrollin'!</div>

I have been trying using jquery animate to do a running text. But I can't seems to get it run in an endless loop. It always runs one time only..

/*  js:  */

$(document).ready(function(){
  function scroll() {
    $('.scroll').animate({ 
      right: $(document).width() 
    }, 8000, scroll); 
  }
  scroll();
});

/* css： */

.scroll {
  position: absolute;
  right: -200px;
  width: 200px;
}

<!-- html: -->

<div class="scroll">This text be scrollin'!</div>

This is the demo: https://jsfiddle/y9hvr9fa/1/

Do you guys know how to fix it?

• javascript
• jquery
• html
• css
• marquee

• I want to try using jquery animate to do the marquee – Coolguy Commented Nov 11, 2016 at 2:29

5 Answers 5

So this is what I did:

1. Precalculate $(document).width() as if a horizontal scroll appears, the width will change in the next iteration

2. Remove the width you have set for scroll so that the width is only as long as the content - and you would have to give white-space:nowrap to keep the text in a line.

3. In the animate use the width of the scroll text using $('.scroll').outerWidth()

See demo below and update fiddle here

$(document).ready(function() {
  
  // initialize
  var $width = $(document).width();
  var $scrollWidth = $('.scroll').outerWidth();
  $('.scroll').css({'right': -$scrollWidth + 'px'});
  
  // animate
  function scroll() {
    $('.scroll').animate({
      right: $width
    }, 8000, 'linear', function() {
      $('.scroll').css({'right': -$scrollWidth + 'px'});
      scroll();
    });
  }
  scroll();
});

body {
  overflow: hidden;
}
.scroll {
  position: absolute;
  white-space: nowrap;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">This text be scrollin'!</div>

Let me know your feedback on this, thanks!

CSS Alternative:

Alternatively you could use a CSS transition like in this CodePen: https://codepen.io/jamesbarnett/pen/kfmKa

More advanced:

$(document).ready(function(){
    var scroller = $('#scroller'); // scroller $(Element)
    var scrollerWidth = scroller.width(); // get its width
    var scrollerXPos = window.innerWidth; // init position from window width
    var speed = 1.5;
    scroller.css('left', scrollerXPos); // set initial position
    
    function moveLeft() {
    	if(scrollerXPos <= 0 - scrollerWidth) scrollerXPos = window.innerWidth;
    	scrollerXPos -= speed;
      scroller.css('left', scrollerXPos);
      window.requestAnimationFrame(moveLeft);
    }
		window.requestAnimationFrame(moveLeft);
});

.scroll {
  display: block;
  position: absolute;
  overflow: visible;
  white-space: nowrap;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller" class="scroll">This text be scrollin'!</div>

Dirty solution (my original answer):

In this example this would be a quick fix:

The text is running to the left without ever stopping. Here you will tell the text to always start at that position. (After the time has run up - meaning not necessarily just when it has left the screen)

$(document).ready(function(){
    function scroll() {
      $('.scroll').css('right', '-200px').animate({ 
         right: $(document).width() 
      }, 8000, scroll); 
    }
    scroll();
});

I hope it is useful :)

function start() {
    new mq('latest-news');
    mqRotate(mqr);
}
window.onload = start;

function objWidth(obj) {
    if (obj.offsetWidth) return obj.offsetWidth;
    if (obj.clip) return obj.clip.width;
    return 0;
}
var mqr = [];
function mq(id) {
    this.mqo = document.getElementById(id);
    var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
    var fulwid = objWidth(this.mqo);
    var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
    this.mqo.innerHTML = "";
    var heit = this.mqo.style.height;
    this.mqo.onmouseout = function () {
        mqRotate(mqr);
    };
    this.mqo.onmouseover = function () {
        clearTimeout(mqr[0].TO);
    };
    this.mqo.ary = [];
    var maxw = Math.ceil(fulwid / wid) + 1;
    for (var i = 0; i < maxw; i++) {
        this.mqo.ary[i] = document.createElement("div");
        this.mqo.ary[i].innerHTML = txt;
        this.mqo.ary[i].style.position = "absolute";
        this.mqo.ary[i].style.left = wid * i + "px";
        this.mqo.ary[i].style.width = wid + "px";
        this.mqo.ary[i].style.height = heit;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
}
function mqRotate(mqr) {
    if (!mqr) return;
    for (var j = mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i = 0; i < maxa; i++) {
            var x = mqr[j].ary[i].style;
            x.left = parseInt(x.left, 10) - 1 + "px";
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
            var z = mqr[j].ary.shift();
            z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}

.marquee {
      position: relative;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    #latest-news {
      line-height: 32px;
      a {
        color: #555555;
        font-size: 13px;
        font-weight: 300;
        &:hover {
          color: #000000;
        }
      }
      span {
        font-size: 18px;
        position: relative;
        top: 4px;
        color: #999999;
      }
    }

<div id="latest-news" class="marquee">
   <span style="white-space:nowrap;">
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">one Lorem ipsum dolor sit amet</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">two In publishing and graphic design</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">three Lorem ipsum is a placeholder text monly</a>
   </span>
</div>

I have been trying using jquery animate to do a running text.

You know that the <marquee> HTML element works, right?

Which means you don't need CSS, Javascript or jQuery.

Pure HTML Solution:

<marquee>This text be scrollin'!</marquee>

The <marquee> element includes a large number of optional declarative attributes which control the behaviour of the scrolling text:

• behavior
• bgcolor
• direction
• height
• hspace
• loop
• scrollamount
• scrolldelay
• truespeed
• vspace
• width

Further Reading:

• https://developer.mozilla/en-US/docs/Web/HTML/Element/marquee

Note 1:

The resource above correctly notes that:

This feature is no longer remended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for patibility purposes.

Note 2

The same resource also remends:

see the patibility table at the bottom of this page to guide your decision

And... a cursory look at that patibility table shows that the <marquee> element is as browser-patible as the most established, most browser-patible elements which exist today.

How is this?

.scroll {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.scroll p{
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 8s linear infinite;
 -webkit-animation: scroll 8s linear infinite;
 animation: scroll 8s linear infinite;
}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll {
 0%   { 
 -moz-transform: translateX(100%); 
 -webkit-transform: translateX(100%); 
 transform: translateX(100%);     
 }
 100% { 
 -moz-transform: translateX(-100%); 
 -webkit-transform: translateX(-100%); 
 transform: translateX(-100%); 
 }
}

<div class="scroll"><p>This text be scrollin'!</p></div>