Wednesday, March 6, 2013

List Cycler with jQuery

<ul id="posts">
   <li><label>Title 1</label>Description</li>
   <li><label>Title 2</label>Description</li>
   <li><label>Title 3</label>Description</li>
</ul>

Javascript function method
var cycler = function(){
   var firstPost;
   removeFirst = function(){
      firstPost = $("#posts li:first");
      firstPost.fadeOut(appendToEnd);
   };
   appendToEnd = function(post){
      firstPost.remove();
      $("#posts").append(firstPost);
   };
   return{
      removeFirst : removeFirst,
      appendToEnd : appendToEnd
   }
}();

$(function(){
   $("#cycler").click(function(){
      cycler.removeFirst();
   });
});

Javascript class method
var ListCycler = function(parentContainer){
   var listContainer = $(parentContainer);
   var firstPost = $(parentContainer + " li:first");
   cycle = function(){
      firstPost.fadeOut(appendToEnd);
   };
   appendToEnd = function(post){
      firstPost.remove();
      listContainer.append(firstPost);
      firstPost.fadeIn();
   };

   return{
      cycle : cycle
   }
};

$(function(){
   $("#cycle").click(function(){
      var cycler = new ListCycler("#posts");
      cycler.cycle();
   });
});

Reference: http://vimeo.com/47483575

No comments: