JSFiddle - React, Tailwind, and code Playground

by alexg88

HTML

<ul class="noticias">
    
    <li>
        Noticia 1
    </li>
     <li>
      Noticia 2  
    </li>
     <li class="ultima">
        Noticia 3
    </li>
    <li style="display:none">
      Noticia 4  
    </li>
     <li style="display:none">
        Noticia 5
    </li>
</ul>

CSS

.noticias li{
 background-color:yellow;    
}

JavaScript

function colaEfectos(){
    
   
    pnoticia=$(".noticias li:first");
    unoticia=$(".noticias li.ultima");
    
    unoticia.removeClass('ultima');
    unoticia.next().addClass('ultima');
   
    pnoticia.slideUp('slow',function(){
        
   // $('.noticias').append(pnoticia);  
      
     pnoticia.appendTo('.noticias');  
    /*pnoticia.remove().appendTo('.noticias');*/});
    unoticia.next().slideDown('slow',function(){window.setTimeout(colaEfectos,3000);});          
  
}

colaEfectos();