JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div id="container">
    
    <div class="quote-wrapper">
        <div class="quote">
            <p>ONE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
        <div class="quote">
            <p>TWO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
    </div>
    
    <div class="quote-wrapper">
        <div class="quote">
            <p>THREE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
        
        <div class="quote">
            <p>FOUR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
    </div>
    
    <div class="quote-wrapper">    
        <div class="quote">
            <p>FIVE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
        
        <div class="quote">
            <p>SIX Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper purus ac elit ornare sit amet tristique odio adipiscing. Donec adipiscing metus et ipsum sollicitudin.</p>
        </div>
    </div>
</div>

CSS

.quote-wrapper {
    top: 0;
    left: 0;
    position: absolute;
}

.quote {
    float: left;
    width: 46%;
    margin-right: 2%;
    font-family: Georgia, Times, serif;
    padding: 8px 0px 0px 50px;
    box-sizing: border-box;
}

.quote p {
    font-size: 18px;
    font-style: italic;
    color: #282c30;
    line-height: 25px;
    text-align: left;
}

JavaScript

$.fn.multipleFadeOuts = function() {
    var $self = $( this ),
        len = $self.length,
        current = 0,
        iId;
    
    $self.hide();
    
    iId = setInterval(function() {
        var $current = $("").add( [ $self[ current ], $self[ current + 2 ] ] ),
            $next = $("").add( [ $self[ current + 2 ], $self[ current + 4 ] ] );
        
        console.log( $current, len );        
        if ( current + 2 > len || current === 0 ) {
            current = 0;
            $current.fadeIn()
        }
        
        $current.fadeOut().promise()
        .done(function() {
            $self.slice( current + 2, current + 4 ).fadeIn()
        });
        
        current += 2;
    }, 2000 );
};

var quote = $('#container .quote').multipleFadeOuts();
// REPEAT???? What if there's 20 quotes....how do I combine this into a simple "fade out/in two at a time, then repeat from beginning once at end?