avoir la liste glisser vers le haut et ajouter le premier élément à la fin de la liste

Question

Je veux fondamentalement glisser tous mes Li et haut, ajoutera au fond et ce sera une rotation des événements à venir.

C'est ce que j'ai jusqu'à présent. Il glisse le premier vers le haut et l'ajoute à la fin de ul, mais ensuite il continue d'ajouter le même li à l'ul toutes les 1000 ms.

Pourquoi ne glisse-t-il pas le premier? Je suppose que je dois utiliser la fonction live en quelque sorte ??

$(document).ready(function() { 

    function scroll() { 
     $('#events ol li:first').slideUp(); 

     $('#events ol li:last').appendTo($('#events ol')); 
    } 


    setInterval(scroll, 1000); 
}); 

Answer 1

Vous devez le modifier un peu pour s'ajouter après avoir glissé vers le haut, comme ceci:

$(function() { 
    function scroll() { 
    $('#events ol li:first').slideUp(function() { 
     $(this).show().parent().append(this); 
    }); 
    } 
    setInterval(scroll, 1000); 
}); 

You can see it in a demo here. Qu'est-ce que nous faisons est après le .slideUp() complète, le rappel fonctionne, qui prend l'élément, le montre (puisqu'il était caché à la fin de la .slideUp()) et fait un .append() de lui-même à son parent ... le déplaçant à la fin.

Answer 2

Une erreur que je vois, est que votre dernier annexant li, annexant le dernier élément ne fera aucune différence parce qu'il est déjà le dernier élément ...

demo

$(document).ready(function() { 

    function scroll() { 
     $('#events ol li:first-child').slideUp(function(){ 
     $(this).appendTo($('#events ol')).show(); 
     });  
    } 

    setInterval(scroll, 1000);​ 
});