首先在代码的如下位置打印事件对象，检查是不是重复调用了：
结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象，所以排除重复调用的可能。
在代码的129行，将动画定时器的时间改大（减慢动画执行速度），观察效果：
经观察，发现这个“水波纹”特效是全屏的，你看到的点击一个按钮后两个按钮上都有水波纹，其实是因为生成的那个水波纹动画层全屏覆盖住了整个页面，由于水波纹层是白色半透明的，所以页面的白色区域下你看不见，有其他颜色的区域都会看见（你可以把body的背景颜色改为除白色外的其他颜色，再点按钮试试）。
根因已经找到，解决的办法很简单，让生成的水波纹层不超出当前按钮区域即可，具体为：在代码第20行，为.waves, .btn 增加两行CSS代码：
position: relativeoverflow: hidden
~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。
h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后出现的所有h5，两种元素必须拥有相同的 父元素 ，但h5不必紧随h3。
说明：这里的h5，h3也可以换成实际项目中的其他标签的类名、标签名或id等。
~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。
.myDiv>h3选择类名名为myDiv里面的第一代h3。
原文： css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ >”（大于号）是什么意思？
选择前面有A元素的所有B标签
为相同父元素中位于A标签后的所有B元素设置样式
两种元素必须拥有相同的父元素，但是B不必直接紧随A出现
是CSS3特有选择器，表示选则A元素的子元素中所有B元素
A B 选择所有后代元素，但是A>B 只选择一代
同时选择A B 两个类，对其应用相同的CSS样式
选择紧接在另一个元素后的元素，二者有相同的父元素
例：增加紧接在h1元素后出现的段落的边距
