标签：
本文主要针对jQuery来探讨。
我在开发过程中，遇到了一个问题，
对同一个dom的class操作，实现动画效果。
此处先普及一下两个jQuery的API。
1.addClass()
顾名思义，这个API的效果就是在指定的dom上添加自己定义的class名，以下为Demo：
<div class="word"> <p>这是一个段落</p> </div>
通过执行$(".word").addClass("test")，整个dom结构会变成：
<div class="word test"> <p>这是一个段落</p> </div>
2.removeClass()
同样的，这个API就是用来删除指定的class的，若未指定，则全部删除。
但是，再动画效果的class被addClass()添加后，
通过removeClass()再addClass()发现效果并没有被实现。
效果很直接，也很简单。在实现一些交互可以广泛使用。Demo：
<div class="word test">
<p>这是一个段落</p>
</div>
执行了$(".word").removeClass("test")后，结果为：
<div class="word">
<p>这是一个段落</p>
</div>
那么，问题来了。
而在做动画的时候，我使用了transition属性。
这个时候在对同一dom进行增减的时候就会出现问题，
在removeClass()和addClass()之间的时间，对于编译器来说，时间是非常短的。
这会造成一个问题，我们拆分来看。
removeClass()删除一个class的时候，由于transition定义的时延效果，会有回归原状态的过程，
而此时编译器在回归还是没开始的时候，已经解析到了addClass()了。
这么一来对于页面效果来说，是根本看不出效果的。
这个时候该怎么办呢。
我总结出了两个方案：
1.setTimeout()
这个一个定时器，我定义addClass()的行为在某个时间后运行。
transition是时延效果的css属性，里面有一个参数就是设置时间，
利用这个时间，设置定时器的延迟运行时间，那么动态效果也就看得出来了。
2.更好的HTML结构
这种方式可以避免对同一dom操作，这么一来一切问起都不存在了。
文笔拙劣，若有不足，请指出！谢谢！
标签：
原文地址：http://www.cnblogs.com/yuet/p/4844493.html
