我有一些css动画由一些javascript代码控制，但动画不适用于它所分配的所有部分。我有一个由div组成的列表，但动画只影响第一个。关于如何使它适用于具有相同ID的所有部分的任何想法，在本例中为“下载”？
以下是代码：
<script language="javascript">
window.onload = function() {
var btn = document.getElementById("download");
btn.addEventListener("click", function(e) {
this.className = "animated";
});
btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
btn.addEventListener("oanimationend", fadeOutUpEnd, false);
btn.addEventListener("animationend", fadeOutUpEnd, false);
}
function fadeOutUpEnd(e) {
e.currentTarget.className = "";
}
</script>
Heres是CSS动画：
.animated {
}
.animated {
-webkit-animation:fadeOutUp 1s;
-moz-animation:fadeOutUp 1s;
-o-animation:fadeOutUp 1s;
-ms-animation:fadeOutUp 1s;
animation:fadeOutUp 1s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
这是HTML：
<div class="list_block">
<!-- ******** Block Logo ******** -->
<section id="section_1">
<img name="SLogo" src="images/ASC.jpg" width="100%" height="100%" alt="" />
</section>
<!-- ******** Block Title & Description ******** -->
<section id="section_2">
<section id="title">
Advanced SystemCare
</section>
<section id="description">
Advanced SystemCare 6 Free takes a one-click approach to protect, repair, clean, and optimize your PC. It's easy to use and 100% safe with no adware, spyware, or viruses.
</section>
</section>
<!-- ******** Block Version ******** -->
<section id="section_3">
<section id="version">
VERSION:
</section>
<section id="vnumber">
6.2.0
</section>
<br />
<!-- ******** Block Color ******** -->
<img name="color" src="images/Ranks/l-m.jpg" width="100" height="20" alt="" />
<br />
<br />
<!-- ******** Block Date ******** -->
<section id="date">
DATE:
</section>
<section id="dnumber">
6/13/2013
</section>
</section>
<!-- ******** Block Download Links ******** -->
<section id="section_4">
<a href="software/ASC.zip">
<section id="download" title="Download ASC">
Download
</section>
</a>
<br />
<a href="http://www.iobit.com/advancedsystemcareper.php#none">
<section id="visit" title="Visit the ASC Website">
Visit Site
</section>
</a>
</section>
</div>
<br />
<div class="list_block">
<!-- ******** Block Logo ******** -->
<section id="section_1">
<img name="SLogo" src="images/ATFCleaner.jpg" width="100%" height="100%" alt="" />
</section>
<!-- ******** Block Title & Description ******** -->
<section id="section_2">
<section id="title">
ATF Cleaner
</section>
<section id="description">
ATF Cleaner will clean out your temp folder in a quick and safe manor. Recommended for Windows XP but has had success with Vista and 7.
</section>
</section>
<!-- ******** Block Version ******** -->
<section id="section_3">
<section id="version">
VERSION:
</section>
<section id="vnumber">
3.0.0.2
</section>
<br />
<!-- ******** Block Color ******** -->
<img name="color" src="images/Ranks/l.jpg" width="100" height="20" alt="" />
<br />
<br />
<!-- ******** Block Date ******** -->
<section id="date">
DATE:
</section>
<section id="dnumber">
6/13/2013
</section>
</section>
<!-- ******** Block Download Links ******** -->
<section id="section_4">
<a href="software/ATFCleaner.exe">
<section id="download" title="Download ATF-Cleaner">
Download
</section>
</a>
<br />
<a href="http://www.atribune.org/?option=com_content&task=view&id=25&Itemid=25">
<section id="visit" title="Visit the ATF-Cleaner Website">
Visit Site
</section>
</a>
</section>
</div>
<br />
答案 0 :(得分：0)
我首先考虑推荐使用document.getElementsByClassName而不是document.getElementById，因为getElementById会根据ID返回单个元素。
你不应该有多个具有相同ID的元素（参见：here），因为ID应该标识元素，因此必须是唯一的。
另一方面，getElementsByClassName将返回一个您需要迭代的数组。
在您的情况下，此方法没有用，因为您要为返回的元素指定类名，如果您可以提前设置特定的类名，则无需对这些元素执行JavaScript操作
但是，所有这些元素都是SECTION标记，因此您可以使用document.getElementsByTagName。
在HTML中 - 将每个元素的id设置为以计数器为后缀，因此它们都是唯一的（如果页面是由服务器代码动态生成的，则应更改服务器代码）。
然后你可以在JavaScript中迭代结果数组 - 检查'download'的id前缀。如果为true，请将类名设置为“动画”。
window.onload = function() {
var sections = document.getElementsByTagName("section");
for(i in sections)
{
var btn = sections[i];
if (btn && btn.getAttribute)
{
var id = btn.getAttribute('id');
if (null != id && 0 == id.indexOf("download"))
{
btn.addEventListener("mouseOver", function(e) { this.className = "animated"; });
btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
btn.addEventListener("oanimationend", fadeOutUpEnd, false);
btn.addEventListener("animationend", fadeOutUpEnd, false);
}
}
}
};