准确来说是动画过程消失,有开头有结尾,但是看不到中间过程。这是我今天发现的一个问题。问题并不在与jquery而是在网页代码本身。其实在原理上我并不知道jquery是如何实现动画效果的,这也导致了这个问题的出现。下面我来描述一下这个问题,算做一次笔记防止以后再发。

在有些时候,我们希望网页中的几个元素成为一个整体进行jquery动画。比如

<div id="div1">
<div id="div2">...</div>
<div id="div3">...</div>
...
</div>

这里我们懒得把div2和div3单独做动画,也没必要。我们直接用jquery做div1的动画,这样被包裹的div2和div3会形成一个整体随着div1的动画来展现。这样做一般来说是没问题的,但有些动画需要div1的尺寸。什么意思呢?一般来说当div1包裹div2和div3的时候,div1的尺寸和div2+div3。但这并不绝对,比如当你设定div2和div3的css中float时,如果此时div1没有设定float你会发现div1的尺寸并不是div2+div3。OK,我相信会写网页代码的人应该都很熟悉这个特点。当div1里的所有元素全部都float的话,此时div1的尺寸是0。然后我们再对div1做jquery动画时,你就会发现有些动画对尺寸为0的元素会消失。这就是这个问题的由来。

总结一下就是用jquery动画有个原则,就是我们让jquery作用的元素一定要有尺寸。当然最好尺寸和所包含元素的尺寸之和一致,这样动画的表现最为准确。

 想说点什么吗?

 (拖动评论框右下角可扩展评论框面积;若评论发表后未显示请耐心等待审核)

左半红印发表于2020.08.3rd