使用间隔（和超时？）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)

    .ready(function(){

        // check that scrollingText has 2 scrollContent element

        $('.scrollMe')

            .each(function(){

                initScrollingText($(this));

            });

    });

    

function initScrollingText($this){

    // store text

    var text = $this.text();

    

    // empty element

    $this.html(null);

    

    var $wrap = $('<div class="scrollTextWrap" />'),

        $text = $('<div class="scrollingText" />'),

        $content = $('<div class="scrollContent" />');

    

    // set content value

    $content.text(text);

    

    // duplicate content

    $text

        .append($content)

        .append($content.clone());

        

    // append text to wrap

    $wrap.append($text)

    

    // add $wrap to DOM

    $wrap.insertAfter($this);

    

    // remove old element

    $this.remove();

}

/* to simulate width constraints */

.parentContainer {

    width: 140px;

    position:relative;

    overflow:hidden;

}

.scrollTextWrap {

    position:relative;

    width:auto;

    display:inline-block;

}

.scrollingText {

    display: flex;

    position:relative;

    transition:left 0.1s;

    animation: scrollText 5s infinite linear;

}

.scrollContent {

    white-space: nowrap;

    padding-right:5px;

}

@keyframes scrollText {

    0% { left:0 }

    100% { left:-50% }

}

<div class="parentContainer">

    <div class="scrollMe">Content you want to scroll goes here</div>

    <!-- alternatively you can just structure the html -->

    <div class="scrollTextWrap">

        <div class="scrollingText">

            <div class="scrollContent">Content you want to scroll goes here</div>

            <div class="scrollContent">Content you want to scroll goes here</div>

        </div>

    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>