Javascript 将文本保留在字幕中

我的目标是总是在我的字幕上显示没有空格的文本。文本应始终显示在此常用动画中

文本应始终显示在此常用动画中。在我真正的项目中，我经常收到推文，我把它们放在字幕中，我删除第一条推文，然后我做一个.append，只要数量是5（这不是一个好的解决方案，如果一秒钟内有10条tweet，用户就无法很好地阅读字幕。我希望字幕中有5个span，在某一点上，我的网页开始变慢，因为不断执行.append并具有许多span元素）

在设定的时间间隔内，我模拟接收tweet的样子。我只想显示初始空间，否则我不想显示空间

我正在使用这个库：

我的问题是，当我尝试添加一个新短语时，动画过早结束。我该如何解决这个问题？ 字幕在显示新添加的句子之前重新启动。也许我做得不对

第一个选框文本
第二个选框文本
第三字幕文本
第四字幕文本
第五字幕文本
$（“.marquee span:last child”）。之后（“第六个字幕文本”）；

---

我希望在动态添加的文本结束时能够准确地检测到它。但是由于某种原因，动画会重新启动

在添加新文本后调用字幕函数是否是一个选项？我认为在调用字幕函数测量当前字符数时会发生一些情况。如果文本没有已经添加了，那些字符还没有添加

$.when( $(".marquee span:last-child").after("<span>Sixth marquee text</span>") ).then(function() {
  $('.marquee').marquee({
      //speed in milliseconds of the marquee
      duration: 5000,
      //gap in pixels between the tickers
      gap: 50,
      //time in milliseconds before the marquee will start animating
      delayBeforeStart: 100,
      //'left' or 'right'
      direction: 'left',
      //true or false - should the marquee be duplicated to show an effect of continues flow
      duplicated: true
    });
});

$('.marquee')
    .bind('finished', function(){
        //Change text to something else after first loop finishes
        console.log('restart')
})

$。当（$（“.marquee span:last child”）。之后（“第六个选取框文本”）。然后（function（）{
$（'.marquee'）。marquee({
//字幕的速度（以毫秒为单位）
持续时间：5000，
//标记之间的像素间距
差距：50，
//字幕开始设置动画之前的时间（毫秒）
延迟开始：100，
//“左”或“右”
方向：'左'，
//正确或错误-是否应复制字幕以显示持续流动的效果
重复：正确
});
});
$（“.marquee”）
.bind（'finished'，function（）{
//在第一个循环完成后将文本更改为其他内容
console.log（'restart'）
})

您必须在JS for

字幕

和CSS中删除

间隙

.js-marquee{ margin-right: 5px !important; } 

每个内容框的

.js marquee

div元素都有一个生成的值，这就是为什么复制的div之间有一些空格

试试看，这对我有用。

看了一下……我发现：

如果您不想看到更改，则最好在

finish

事件发生时进行追加。此时可以销毁实例、追加新文本并重新实例化

首次启动时，您希望文本从输入的右侧开始…
但在重新实例化时，它需要从左侧开始。
这里有一个选项：

startVisible

true

或

false

但它需要1.4.0版，而您使用的是1.3.1版

因此…在下面的代码片段中，我将选取框实例化放在一个命名函数中，以便以后能够再次调用它

第一次实例化后，

startVisible

变量更改为

true

然后，我使用了2秒的

setTimeout

来模拟某种 类似于Ajax响应的事件，它希望附加一个新字符串

但是我让它“等待”等待

finish

事件发生。
在这里，时机是很重要的

var startVisible=false；//第一次实例化将从右侧开始。
函数marqueeInit（）{
$（'.marquee'）。marquee({
持续时间：5000，
gap:0，//我已尝试按您所说的做，但不起作用，请更新我的JSDFIDLE好吗？在完全显示动态添加的文本之前重新启动。您毕竟只想删除空格，并且只有在看到初始内容时才删除空格，对吗？我不希望看到空格，只希望在开始时看到屏幕上的文本“左”是有效的。只有当它第一次开始时才有效。但我希望在动态添加的文本结束时能够准确地检测到它。但由于某种原因，动画会重新启动。在动态添加的文本结束时，它检测到的事件不会这样做。有一个突然的变化，它会重新启动。这是一个，这是否未更正？I think它可以工作，但是为什么事件会被调用2次呢？看看console.logHuh，不确定，但它在我的解决方案和您最初的小提琴中都发生了。我想我还没有让自己明白。非常感谢您花这么多时间阅读文档。您所做的将是完美的，除了每次动画在最后添加的句子。«每次动画结束时检测»好的，没问题。»在最后添加的句子中。»嘿…什么？我不明白。我可以检测动画何时结束。这很简单，如
$（'.marquee'）。on（“finished”，function（）{//Do something}；
——它现在添加到
marqueeInit（）
函数中。
.js-marquee{ margin-right: 5px !important; }