jQuery在使用each及animate等方法出现卡顿

问题场景

    jQuery 在使用选择器对页面上多个html元素进行动画操作的时候，如果元素数量较多则会出现卡顿。因此在页面特效的设计上需要考虑这一类情况。

解决方案

    实际上我们在对for循环和each的比较中（写一个for循环和一个each来遍历DOM元素）可以明显看出，for循环的效率是比each高的，因为jQuery是将HTML标间先转化成jQuery对象再进行一系列的操作。基于这个情况我们可以考虑不用jQuery对象的操作行为来达成动画特效。


        CSS3可以达成此操作，利用好CSS3的transition动画来实现类似过度效果是比较推荐的方法。jQuery的animate方法原理是动态地去计算一个样式变换值并替换到对应的元素上面以达成动画效果。CSS3对于动画的解释有animation 与 transition两种实现。transition强调的是过度特效，二animation强调的是流程与控制。对于动画的不同关键帧数，可以选择不同的动画样式表。

示例记录

元素批量进出的动画特效：例如slideUp/slideDown or fadeOut/fadeIn等操作，在元素多的情况下，建议在元素第一个样式表中添加css:transition而在需要变化的时候，使用JQuery(selector).toggleClass(animationClassName)来增加一个优先级别较高的样式表，以改变高度 或者宽度 达到例如收起放下的效果。
toggleClass是不需要计算的，动画的计算过程交给了浏览器对css的解析和渲染，这相对javascript的性能来说要高很多

其他动画特效
有规律的旋转、变换
鼠标点击后触发的固定变换动画