使用间隔（和超时？）Javascript，JQuery 动画文本

Question

我想让一个文本从左到右循环运行。这是我尝试的小提琴： https ://jsfiddle.net/9Lruxym8/33/

我从 css @keyframes 开始，但我认为如果我想让文本无缝运行，我需要文本本身的宽度。我的想法是写下文本两次，一旦带有文本的 div 正好运行到一半，动画就会再次开始。

@keyframes 不起作用后，我尝试了 jQuery 动画。它确实有点工作，但运行不流畅。现在我想通过过渡来做到这一点。我认为间隔和超时的组合可以解决问题，但我仍然无法正常工作 - 现在，我不知道为什么。有人喜欢我吗？

function runText() {

  var text_width = $('#runningP').width()/2;

  console.log(text_width)

  setInterval(function(){

    console.log("interval");

    $('.text').css({'transition':'margin-left 5s'});

    $('.text').css({'margin-left':'-' + text_width + 'px'});

    moveBack();

  }, 3000);

  function moveBack() {

    console.log("timeout")

    setTimeout(function(){

      $('.text').css({'transition':'none'});

      $('.text').css({'margin-left': 0});

    }, 3000);

  }

}

runText();

Answer 1

我最近为此功能编写了一些自定义代码。看看我的代码，它似乎基本上有 3 个“级别” (.scrollTextWrap > .scrollingText > .scrollContent)，但这是我最终使用的结构，以获得干净和一致的效果。我也添加了一个初始化程序，这样你就可以简单地添加scrollMe类并让它们为你设置 html在代码片段中，我添加了一个.parentContainer纯粹是为了展示它在受约束时的工作方式$(document)&nbsp; &nbsp; .ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; // check that scrollingText has 2 scrollContent element&nbsp; &nbsp; &nbsp; &nbsp; $('.scrollMe')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initScrollingText($(this));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;function initScrollingText($this){&nbsp; &nbsp; // store text&nbsp; &nbsp; var text = $this.text();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // empty element&nbsp; &nbsp; $this.html(null);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var $wrap = $('<div class="scrollTextWrap" />'),&nbsp; &nbsp; &nbsp; &nbsp; $text = $('<div class="scrollingText" />'),&nbsp; &nbsp; &nbsp; &nbsp; $content = $('<div class="scrollContent" />');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // set content value&nbsp; &nbsp; $content.text(text);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // duplicate content&nbsp; &nbsp; $text&nbsp; &nbsp; &nbsp; &nbsp; .append($content)&nbsp; &nbsp; &nbsp; &nbsp; .append($content.clone());&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // append text to wrap&nbsp; &nbsp; $wrap.append($text)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // add $wrap to DOM&nbsp; &nbsp; $wrap.insertAfter($this);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // remove old element&nbsp; &nbsp; $this.remove();}/* to simulate width constraints */.parentContainer {&nbsp; &nbsp; width: 140px;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; overflow:hidden;}.scrollTextWrap {&nbsp; &nbsp; position:relative;&nbsp; &nbsp; width:auto;&nbsp; &nbsp; display:inline-block;}.scrollingText {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; transition:left 0.1s;&nbsp; &nbsp; animation: scrollText 5s infinite linear;}.scrollContent {&nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; padding-right:5px;}@keyframes scrollText {&nbsp; &nbsp; 0% { left:0 }&nbsp; &nbsp; 100% { left:-50% }}<div class="parentContainer">&nbsp; &nbsp; <div class="scrollMe">Content you want to scroll goes here</div>&nbsp; &nbsp; <!-- alternatively you can just structure the html -->&nbsp; &nbsp; <div class="scrollTextWrap">&nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollingText">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollContent">Content you want to scroll goes here</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollContent">Content you want to scroll goes here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>