Animated Accordion

Wow, I was on vacation wandering around Central Europe (I intend to write some entries about this) for nearly 2 weeks, and then I was tired-busy enough that all in all I've been 20 days without posting... well, I doubt anyone has missed the activity in this blog... but anyway, time for a fast entry.

Probably many people will find this effect irritating, but since my times with Action Script almost one decade ago I've ever found all this sort of animations fascinating. So, while jQuery UI Accordion makes a nice job, I feel like in some cases (like when it's used as the central piece of some "presentation like" page), it needs something to make it "cooler". Displaying the different headers of the accordion in a gradual manner seems like a neat effect to me, and it's been pretty simple to implement

I've used it here for this landing page (by the way, my uncle has published a new book, it's a shame that it's in Spanish, cause it's well worth a read and will be freely available in a few weeks):

Jesus Aller

and this is the code:

var accordionStartAnimation = function _accordionStartAnimation(duration, delay){
 this.duration = duration || 500;
 this.delay = delay || 200;
};

accordionStartAnimation.prototype.animate = function _animate($accordion){
 this.$accordion = $accordion;
 this.$headers = this.$accordion.find("> h3").hide();
 this.$contents = this.$headers.next("div").hide();
 this.curItem = 0;
 this._animateNext();
};

accordionStartAnimation.prototype._animateNext = function _animateNext(){
 var self = this; 
 if (this.curItem < this.$headers.length){
  this.$headers.eq(this.curItem).show(this.duration, function(){
   setTimeout(function(){
    self._animateNext();
   }, self.delay);
  });
  this.curItem++;
 }
 else{
  setTimeout(function(){
   self.$contents.eq(0).show(self.duration);
  }, this.delay);
 } 
};



$booksAccordion = $("#booksAccordion").accordion({
  autoHeight: false,
  fillSpace: true
   });
 new accordionStartAnimation().animate($booksAccordion);

As you can see the idea is pretty simple, we create a normal accordion, and immediately hide all its elements (headers and contents). Then we chain the animated display of each of these headers (adding a minor delay between animations) and when the last header is done we show the content of the first item