Question

我的目标是始终在没有空格的情况下在我的选框上显示文字。应该始终显示一个文本，显示在这个通常的动画中。

文本应始终显示在此常用动画中。在我的真实项目中，我经常接收推文，我将它们放在选框中，我删除了第一个，然后只要数量为5就制作.append（不是一个好的解决方案，如果10个推文到达第二，用户无法很好地阅读选框。我希望在选框内有5个跨度，在某个时刻我的网页开始变慢，不断执行.append并且有很多span元素。）

在设定的时间间隔内，我模仿就像接收推文一样，。我想要展示的唯一空间是初始空间，否则我不想显示空格。

我正在使用这个库： 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 gap中的marquee。在你的CSS中，

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

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

试试，这项工作适合我。

Answer 3

简短地看一下documentation ......我找到了：

如果您不希望更改可见，则finish事件发生时会更好地发生追加。这是销毁实例，添加新文本和重新安装的时间。
首次启动时，您希望文本从输入的右侧开始...
但在重新实例化时，需要从左侧开始可以选择此选项：startVisible true或false 但它需要1.4.0版本，而您使用的是1.3.1

所以... 在下面的代码段中，我将Marquee实例化放在命名函数中，以便以后再次调用它。

首次实例化后，startVisible变量将更改为true。

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

但是我已经＆＃34;等待＆＃34; 发生finish事件。
时间，这里很重要！

＆＃13;

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.

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

将文本保留在选取框中

3 个答案: