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

Posted 2023-05-08

【中文标题】动画添加类并重新计算总类

【英文标题】：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').. 所以它会有相同的结果。我将此添加到小提琴中，链接现在在我的问题中

【参考方案1】：

见my fiddle

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

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

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

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

【讨论】：

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