Sequential DIV fadeIn/Out onClick - class change

Question

The idea is to have a single anchor or button with a cycle of functions depending on class. I've played around with a few things but always get stuck with it calling the same function even though the class has been changed.

Not being fluent in jQuery, I'm not even sure if this is possible the way I forsee it.

The effect I'm going for is that this button can be spammed which will continue to add divs in a cycle but will ultimately fade out at the end.

Couple of examples I've tried: JSFIDDLE #1 - JSFIDDLE #2

HTML:

<a class="points first">Points</a>

<div class="ten-points"> 
  10 Points
</div>

<div class="twenty-points"> 
  20 Points
</div>

<div class="no-points"> 
  Lost your points
</div>

JS

$(function () {

 $('.first').click(function () {
   $('.points').removeClass('first').addClass('second');
   $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });

 $('.second').click(function () {
   $('.points').removeClass('second').addClass('third');
   $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });

 $('.third').click(function () {
   $('.points').removeClass('third').addClass('first');
   $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');
 });
});

Answer 1

I believe I got it working the way you want :) The problem was that you were not checking the current class dynamically after change. Updated jsfiddle here.

$('.points').click(function () {

  if($('.points').attr("class") === "points first") {
    $('.points').removeClass('first').addClass('second');
    $('.ten-points').fadeIn('slow').delay(2000).fadeOut('slow');

  }else if($('.points').attr("class") === "points second") {

     $('.points').removeClass('second').addClass('third');
       $('.twenty-points').fadeIn('slow').delay(2000).fadeOut('slow');

  }else if($('.points').attr("class") === "points third") {

      $('.points').removeClass('third').addClass('first');
    $('.no-points').fadeIn('slow').delay(2000).fadeOut('slow');

  }

});