动态添加文本到 jQuery 选框

Question

How to add text in jquery marquee dynamically?

I have tried to append the text to a marquee, it's working but when I add long text, it starts not working properly (The text marquee didn't finish in the middle of animation marquee will be started again even the last text hasn't arrived yet).

my code like this:

 $(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 seems to be really futsy. This should get you close to where you'd like to be. I can't keep working on it, but I wanted to at least put you in the right direction. Before its invocation, you can .bind() an event called finished that will destroy the old marquee, reset data, and resume the marquee. However, there doesn't seem to be any looping options that don't make it restart from the right of the screen, so it jumps. I'm sure there's something you can do with this. Please look at the event part of Marquee.js' documentation for more info.

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>