Fade Individual and Rotate Text Jquery

Question

I am trying to achieve very similar to this text slider https://www.lynda.com/in/general3 at first slide, it shows paragraph by paragraph then on the second slider it shows the whole paragraph at the same time. I have already achieve this but my problem is I am unable to display the text one by one on the first div and loop it

(function() {

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


$(document).ready(function(){
    var numOfLines = 2;
    var delay = 1000;
    var fadeTime = 1000;
    for (i = 0; i < numOfLines + 1; i++) { 
       $('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
    }
});

http://jsfiddle.net/d94gv2zm/

both your question and jsfiddle are lacking enough content to describe your issue. you only have two `h2`s in your html, yet you are saying you cannot show them and THEN slide. you will need at least two containers that slide, with content in them. — Tyler Fowle, Jan 04 '18 at 21:47
Voting to close as unclear because your code already appears to do what you want: It fades one quote out before fading the second one in, then loops, fading the first one in again. — Draco18s no longer trusts SE, Jan 04 '18 at 21:55
@Draco18s i disagree with closing. the code snippets just need updated — Tyler Fowle, Jan 04 '18 at 22:07
@TylerFowle The close reason states, "Please clarify your specific problem or add additional details to highlight exactly what you need." Your own comment says, "Your question and jsfiddle are lacking enough content to describe your issue." These two statements are identical, I feel justified. But sure, by all means, disagree. But unless an edit happens, I'm not retracting my vote. — Draco18s no longer trusts SE, Jan 04 '18 at 22:20
made some edit on it. For clarification I just want something similar to this https://www.lynda.com/in/general3 but I cannot match the behavior of the line by line of the first slide — JeVic, Jan 04 '18 at 22:59

Tyler Fowle · Accepted Answer · 2018-01-04T22:24:12.513

building off of what you already have, you need containers for the elements you want to fade in, and then just do something similar to what you already have, but for each content piece.

Codepen example: https://codepen.io/tylerfowle/pen/goGWEX

(function() {

  var quotes = $(".slide");
  var quoteIndex = 0;
  var slideDuration = 0;
  var headlineDelay = 500;
  
  (function showSlide() {
    
    $this = quotes.eq(quoteIndex % quotes.length);
    $this.fadeIn(slideDuration).delay(2000).fadeOut(2000, showSlide);
    $this.find(".content").attr("style","");
    $this.find(".content").each(function(i){
      $(this).delay(headlineDelay * i).fadeIn(500);
    });
    
    
    ++quoteIndex;
  })();
  
})();

.slide {
  display: none;
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='slider'>
  <div class='slide'>
    <div class='content'>
      <h2>Slide 1 - Headline 1</h2>
    </div>
    <div class='content'>
      <h2>Slide 1 - Headline 2</h2>
    </div>
    <div class='content'>
      <h2>Slide 1 - Headline 3</h2>
    </div>
  </div>
  <div class='slide'>
    <div class='content'>
      <h2>Slide 2 - Headline 1</h2>
    </div>
    <div class='content'>
      <h2>Slide 2 - Headline 2</h2>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 04 '18 at 21:49

See if this accomplishes what you want:

jQuery(function ($) {
    var $quotes = $('.quotes');
  
    function loop() {
        setTimeout(function () {
            $quotes.eq(0).fadeIn(1000, function () {
                setTimeout(function () {
                    $quotes.eq(1).fadeIn(1000, function () {
                        setTimeout(function () {
                            $quotes.fadeOut(1000, function () {
                            /* Begin the recursiion here */
                            loop();
                        });
                    }, 500)
                });
            }, 500);
        });
      }, 500);
  }
  
  loop();
});

.quotes {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

The above snippet uses a series of setTimeout() and .fadeIn() routines to simulate the text as you show in the Lynda example. Calling setTimeout() recursively like this, ensures that animations complete before the next iteration begins and is a bit safer in this case than using setInterval() for example. The use of recursion here creates somewhat of a pseudo loop without using the core loop constructs available within JavaScript. I expand on why this is in more detail in this answer.

score 0 · Answer 3 · answered Jan 04 '18 at 22:05

0

You can achieve it with pure CSS:

HTML:

<h2 class="quotes quote1">first quote</h2>
<h2 class="quotes quote2">second quote</h2>
<h2 class="quotes quote3">third quote</h2>

CSS:

.quotes{
  opactiy:0;
  transition: opacity .3s linear;
  animation-duration:10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.quote1{
   animation-name: quote1;
}
.quote2{
   animation-name: quote2;
}
.quote3{
   animation-name: quote3;
}

@keyframes quote1{0%,45%,100%{opacity:1}50%,95%{opacity:0}}

@keyframes quote2{0%,10%{opacity:0}15%,45%{opacity:1}50%,100%{opacity:0}}

@keyframes quote3{0%,25%{opacity:0}30%,45%{opacity:1}50%,100%{opacity:0}}

http://jsfiddle.net/d94gv2zm/3/

answered Jan 04 '18 at 22:05

OleP

1
1

thanks but how do i apply it to the next slide I need to display it like that on the first slide but on the second slide the paragraph needs to be whole – JeVic Jan 04 '18 at 23:00
You just make a div with the class quote4 and place the next three quotes in there. Then you make another set of keyframes like this: @keyframes .quote4 {0%,50%{opacity:0}55%,90%{opacity:1}95%{opacity:0}}. – OleP Jan 05 '18 at 14:47

Fade Individual and Rotate Text Jquery

3 Answers3