динамически добавлять текст в jQuery Marquee

Question

Как добавить текст в jquery выделять динамически?

Я пытался добавить текст в выделение, он работает, но когда я добавляю длинный текст, он начинает не работать правильно (текстовое выделение не закончилось sh в середине анимационного выделения будет запущено снова, даже если последний текст еще не поступил).

мой код выглядит так:

$(document).ready(function(){
          $('.marquee').marquee({
            //speed in milliseconds of the marquee
            duration: 15000,
            //gap in pixels between the tickers
            gap: 50,
            //time in milliseconds before the marquee will start animating
            delayBeforeStart: 0,
            //'left' or 'right'
            direction: 'left',
            //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: true
        });
      });

 function AppendData(){
            document.getElementById("line").innerHTML += '| MARK | ------------------------------------ THIS IS LONG TEXT I APPEND -------------------------------------------------------------------';
 }

.marquee {
        width: auto;
        overflow: hidden;
      }

      .marquee span.line{
          padding-top: 6px;
          color: rgba(0,0,0, 0.6);
          font-size: 9pt;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js" type="text/javascript"></script>

<div class="marquee" id="tambah">
      <span class="line" id="line"><span class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    </div>
  
  <button onclick="AppendData()">Add Text</button>

Answer 1

Marquee. js кажется действительно дурацким. Это должно приблизить вас к тому месту, где вы хотели бы быть. Я не могу продолжать работать над этим, но я хотел, по крайней мере, направить вас в правильном направлении. Перед его вызовом вы можете .bind() событие под названием finished, которое уничтожит старую область выделения, сбросит данные и возобновит выделение. Тем не менее, кажется, что нет никаких вариантов зацикливания, которые не заставляют его перезапускаться с правой стороны экрана, поэтому он скачет. Я уверен, что вы можете что-то сделать с этим. Пожалуйста, посмотрите на часть события Marquee. js 'документация для получения дополнительной информации.

https://github.com/aamirafridi/jQuery.Marquee#events

$(document).ready(function() {
  const options = {
    //speed in milliseconds of the marquee
    duration: 2000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
  };
  const textToAdd = '| MARK | ------------------------------------ THIS IS LONG TEXT I APPEND -------------------------------------------------------------------';
  var addLine = false;
  const line = $("#line");
  const btn = $("#btn");
  
  $('.marquee').bind('finished', function() {
    if (addLine == true) {
      var newLine = $("#line").innerHTML += textToAdd;
      $(this).marquee('destroy').append(newLine);
      $('.marquee').marquee(options);
      
    }
  }).marquee(options);

  btn.on("click", function appendData() {
    addLine = true;
  });


});

.marquee {
  width: auto;
  overflow: hidden;
}

.marquee span.line {
  padding-top: 6px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 9pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js" type="text/javascript"></script>

<div class="marquee" id="tambah">
  <span class="line" id="line">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

<button id="btn">Add Text</button>