JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<ul id="testi_ticker">
    <li>This is a banging ticker - 1
    sdfdsfdsfffffffff
    dsffffffffffff
    dsffffffffffffff</li>
    <li>This is a banging ticker - 2</li>
    <li>This is a banging ticker - 3</li>
    <li>This is a banging ticker - 4</li>
    <li>This is a banging ticker - 5</li>
</ul>

CSS

#testi_ticker {
display:none;
    list-style:none;
    font-size:2em;
}

#testi_ticker li {
    opacity:0;
}

JavaScript

$(document).ready(function(){

    /* 
       note that smoothing this out relys on the CSS
       the children elements must have opacity set to 0                 
       initially, and the container should also be hidden 
       in the CSS.
    */
function bangingTicker(container,element) {             
           
    var tickContainer = $(container);             
        
         // wrap the original tick function in a callback function to the fadeIn   
        tickContainer.fadeIn(1000, function(){ 
            function tick(){             
                var tickElem = tickContainer.children(element);             
                tickElem.eq(1).siblings().animate({             
                    opacity: 0             
                    },400, function() {             
                        tickContainer.stop(true,true).delay(10).animate({             
                        'margin-top': 120            
                        },0,function() {             
                            tickContainer.delay(100).animate({             
                            'margin-top': 20             
                            },8000);             
                        });             
                            tickElem.first().appendTo(tickContainer);             
                            tickElem.eq(1).delay(200).animate({             
                                opacity: 1             
                            },400);             
                        });             
             
            }   
    
// run the function once to avoid waiting for the interval on the first animation
             tick();
            setInterval(function(){ tick () }, 4000);  

      });         
              
}             


    

bangingTicker('#testi_ticker','li');   
               
    
});