Question

这个想法很简单;首先向某些div添加一个类，然后使用click函数删除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/

Answer 1

请参阅my fiddle

在代码退出重新计算部分时，不会进行DOM更新。

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

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

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

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

1 个答案: