0

New to HTML and Javascript coding. Looking for a little bit of help. I have this code but when the line of text changes to the scrolling text it doesn't let the entire line scroll before it fades back to the first line.

The scrolling text line will change regularly, so it will need to be able to pick up when it's finished scrolling.

Is this possible? Please and thank you for all of your help!

HTML Code

<h2 class="quotes">Now Playing on Radio Wolf</h2>
<h2 class="quotes"><marquee width="60%" direction="left" height="100px">5 Seconds of Summer - Permanent Vacation</marquee></h2>

JS Code

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;
    
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }
    
    showNextQuote();
    
})();

CSS Code

.quotes {display: none;}
TheOfficialDaxx
  • 1
  • 2

1 Answers1

0

It sounds like the fadeOut timer is set too low.

Try setting it at:

.fadeOut(5000)

to give the data more time to load and to be able to select it before it fades out.

allenski
  • 1,652
  • 4
  • 23
  • 39
Terry Gleason
  • 1
  • 2
  • Hiya Terry, thanks for your answer, just wanted to say that with that revision the problem I face is that the main title is there too long and if the title is longer than the `5000` will allow for, it will still cut it off. – TheOfficialDaxx Oct 24 '20 at 19:15
  • Ok just remember 5000 is equal to 5 seconds so if you need more time raise it higher. – Terry Gleason Oct 24 '20 at 19:21
  • Would it be possible to make the first line stay on for 4000 and the second line for 8000? – TheOfficialDaxx Oct 24 '20 at 19:36
  • the var is set at "quotes" so it is reading both lines as one line so you are unable to split the fadeOut time separate. If you break the quotes into different lines using an id instead of a class for the lines and like id = "quoteTitle" and id "quoteBody" and put them in different variables you then can fade them separately. – Terry Gleason Oct 24 '20 at 20:03