Question

The idea is simple; first add a class to certain divs, then with a click function remove 1 of the elements class and recount the total classes.
But while removing the old class and adding the new class i want to use an animation.

HTML:

   <div>1</div>
   <div>2</div>​

CSS:

.divclass{
    width:200px;
    height: 200px;
    border: 1px solid #000000;
    background: #ffffff;
}

.divclass2{
    width: 250px;
    height: 250px;
    background: #000000;
}​

Jquery:

var div = $('div').eq(0);
var div2 = $('div').eq(1);

div.addClass('divclass');
div2.addClass('divclass2');

var totaldivclass = $('.divclass').size();
var totaldivclass2 = $('.divclass2').size();

alert(totaldivclass);
alert(totaldivclass2);    

$('.divclass2').click(function(){
$('.divclass2').animate({
    'width':'200px',
    'height':'200px',
    'background':'#ffffff'
}, function(){$('.divclass2').removeClass('divclass2').addClass('divclass')});

//recount total classes
totaldivclass = $('.divclass').size();

alert(totaldivclass);
});​

This works, tough not the way i want it:
at the first click it does the animation, then afterwards it should add and remove the classes.
then after that it should recount the classes and alert the total.

it does all this, but at the first click it counts all the current classes as 1.
the second click however shows 2..

my question: how do i get it to work so it counts 2 elements (so the correct total) at the first click?

Fiddle:
http://jsfiddle.net/a6mx2/

Answer 1

See my fiddle

The DOM updating isn’t done by the time the code drops out to the recalculation part.

Moving the recount inside the animate function then shows the correct total.

 function(){        
        $(this).removeClass('divclass2').addClass('divclass')
        totaldivclass = $('.divclass').size();  
        alert(totaldivclass);  });    

So you have a DOM update “threading” issue.