在按钮点击css动画后隐藏div
作为当前时间,我点击了按钮时触发了CSS3动画,并且一切正常。它是一个代表植物生命周期的动画,分5个阶段进行工作,每个阶段都显示一幅图像和相应的文字。但是,如果我点击了第一阶段,然后是第二阶段,并且想要再次点击第一阶段以再次查看支持文本,同时从第二阶段隐藏图像,我似乎无法做到这一点。在按钮点击css动画后隐藏div
的jsfiddle您的舒适:
当前阶段的现场查看:
http://www.mattmeadows.info/MFTW2/howplantsgrow.html
的Javascript:
$(function() {
$("#stage1").click(function() {
$("#Seed1,#infoBox1").toggleClass("animate")
});
$("#stage2").click(function() {
$("#Seed2,#infoBox2").toggleClass("animate")
});
$("#stage3").click(function() {
$("#Seed3,#infoBox3").toggleClass("animate")
});
$("#stage4").click(function() {
$("#Seed4,#infoBox4").toggleClass("animate")
});
$("#stage5").click(function() {
$("#Seed5,#infoBox5").toggleClass("animate")
});
});
HTML段是动画:
<div id="Seed1" class="target">
</div> <!-- end of Seed1 -->
<div id="infoBox1">
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1
</div>
(总共有
CSS这些DIV组合5:
@-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#Seed1
{
opacity:0;
}
#Seed1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox1
{
width: 400px;
height: 100px;
background:white;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
}
#infoBox1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
。假定“动画”是“接通”类(它似乎是),尝试使该复位然后一切动画的特定元件的方法:
function setStage(stage) {
var numberOfStages = 5;
for (i=1; i <= numberOfStages; i++) {
if (i == stage) {
$("#infoBox" + i).addClass("animate");
$("#Seed" + i).addClass("animate");
} else if (i < stage) {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).addClass("animate");
} else {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).removeClass("animate");
}
}
}
实施例使用:
$(document).ready(function() {
$("#stage1").click(function() {
setStage(1);
});
//stage 2,3,5 etc...
$("#stage4").click(function() {
setStage(4);
});
});
。假定 '动画' 是 '上' 级(好像是),尝试使该重置一切的方法然后进行动画特定元素:
function resetState() {
//you can use classes here to make it neater
$("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");
}
实施例使用:
$("#stage1").click(function() {
resetState();
$("#Seed1,#infoBox1").toggleClass("animate");
});
虽然这几乎是我想要的,有没有办法修改给出的例子,以便图像保持(#Seed1),而#infoBox1,2,3,4,5改变? – WibblyWobbly 2013-04-07 15:44:03
您可以发送您不想重置的图像的ID,我将它添加到单独的答案中 – 2013-04-07 16:56:00
已按照建议更改了resetState,但它仍然一次只显示1个图像,而不是渐进式样式。 (原始问题的实时链接是最新发生的例子) – WibblyWobbly 2013-04-07 17:14:53
好的,所以我想我现在得到你想要的 - 文本bx应该是最后点击的那个,图像应该显示所有阶段(种子)直到最后一个阶段点击。那是吗? – 2013-04-07 17:18:49
说第1阶段被点击:显示阶段1和图像的文本。 第2阶段点击:显示阶段2的文本和阶段1的图像以及所有阶段的图像 等等。 但是,我仍然希望能够点击任何按钮来查看任何顺序,而以前的种子图像保留 – WibblyWobbly 2013-04-07 17:21:20