将文本保留在选框中

Question

我的目标是始终在我的选框上显示没有空格的文本。在这个通常的动画中应该总是出现一个文本。

文本应该总是出现在这个通常的动画中。在我的实际项目中，我不断收到推文并将它们放在选框中，我删除第一个，然后只要数量为 5，我就进行 .append（不是一个好的解决方案，如果 10 条推文以其次，用户不能很好地阅读选框。我想在选框内有 5 个跨度，在某个时刻，我的网页开始变慢，因为不断执行 .append 并有很多跨度元素。

在设定的时间间隔内，我模拟接收推文，.我要显示的唯一空格是首字母，否则我不想显示空格。

我正在使用这个库： https://github.com/aamirafridi/jQuery.Marquee

当我尝试添加新短语时出现问题，动画提前结束。我该如何解决？ 选框在显示新添加的句子之前重新启动。也许我的做法不对。

http://jsfiddle.net/pt4rwo35/

<div class="marquee">
 <span>first marquee text</span>
 <span>second marquee text</span>
 <span>third marquee text</span>
 <span>fourth marquee text</span>
 <span>fifth marquee text</span>
</div>

$(".marquee span:last-child").after("<span> Sixth marquee text</span>");

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

Answer 1

添加新文本后是否可以选择调用选框功能？我认为当调用 marquee 函数来测量当前字符数时会发生一些事情。如果尚未添加文本，则表示尚未添加这些字符。

$.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')
})

Answer 2

您必须在 JS 中为 marquee 删除 gap。在你的 CSS 中，

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

每个内容框的.js-marquee div 元素都有一个生成的值，这就是重复的 div 之间有一些空格的原因。

试试，这对我有用。

Answer 3

看了一眼documentation...我发现：

1. 如果您不希望更改可见，则最好在发生finish 事件时进行追加。这是销毁实例、添加新文本并重新实例化的时候了。
2. 首次启动时，您希望文本从输入的右侧开始...
   但是在重新实例化时，它需要从左侧开始。
   有一个选项：startVisible true 或 false。
   但它需要 1.4.0 版本，而您使用的是 1.3.1

所以...在下面的 sn-p 中，我将 Marquee 实例化放在一个命名函数中，以便以后能够再次调用它。

第一次实例化后，startVisible 变量变为true。

然后，我使用了 2 秒的 setTimeout 来模拟某种 像 Ajax 响应这样想要附加新字符串的事件。

但我让finish 事件发生“等待”。
在这里，时机很重要！

var startVisible = false;  // First instantiation will start at the right side.

function marqueeInit(){
  $('.marquee').marquee({
    duration: 5000,
    gap: 0,             //  <-- zero space between the string and the "duplicated" string.
    delayBeforeStart: 0,
    direction: 'left',
    duplicated: true,
    startVisible: startVisible
  });
  
  $('.marquee').on("finished", function(){
    console.log("Animation finished");
  });
}

// Onload init
marqueeInit();
startVisible = true;  // It has to start visible for all future instantiation.

setTimeout(function(){

  console.log("Ajax response! We have a new string to add!");

  $('.marquee').one("finished", function(){  // This function will be executed only once because of .one()
  
    // Destroy the previous instance.
    $(this).marquee("destroy");

    // Add a string
    $(".marquee span:last-child").after("<span>===Sixth marquee text===</span>");

    // Re-instanciate Marquee.
    marqueeInit();
    
    console.log("New string added!");
    
  })
},2000);   // <-- 2 seconds timeout JUST FOR THE DEMO. It simulate an "anytime" append.
          // That .one() function is what you should have in an Ajax success callback, for example.
          

.marquee {
  font-family:arial,sans-serif;
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ddd;
}
.vertikal {
    height:20px;width:200px;
}
.gambar {
     width:100%!important;
    height:auto!important;
    background:none!important;
    border:0px!important;
}
.gambar img {
    border:1px solid #eee;
    width:200px;
    height:125px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="marquee">
	<span>first marquee text</span>
	<span>second marquee text</span>
	<span>third marquee text</span>
	<span>fourth marquee text</span>
	<span>fifth marquee text</span>
</div>