动画添加类并重新计算总类答案

【问题标题】：animate addclass and recount total classes动画添加类并重新计算总类
【发布时间】：2012-12-09 03:44:03
【问题描述】：

这个想法很简单；首先将一个类添加到某些 div，然后使用单击功能删除元素类中的 1 个并重新计算总类。但是在删除旧类并添加新类时，我想使用动画。

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);
});

这很有效，但不是我想要的方式：在第一次点击它做动画，然后它应该添加和删除类。然后它应该重新计算班级并提醒总数。

它会完成所有这些，但在第一次单击时，它会将所有当前类计为 1。然而，第二次点击显示 2..

我的问题：如何让它工作，以便在第一次点击时计算 2 个元素（所以正确的总数）？

小提琴： http://jsfiddle.net/a6mx2/

【问题讨论】：

您在点击中重新选择...如果我的操作正确，您可能希望在点击处理程序中使用 $(this)。
恐怕这并不重要，$(this) 只是简单地引用回 $('.divclass2').. 所以它会有相同的结果。我将此添加到小提琴中，链接现在在我的问题中

标签： jquery class count click jquery-animate

【解决方案1】：

见my fiddle

在代码退出到重新计算部分时，DOM 更新尚未完成。

在 animate 函数中移动重新计数，然后显示正确的总数。

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

所以你有一个 DOM 更新“线程”问题。

【讨论】：

没有问题，调试很愉快 :)