使用按钮播放/停止动画

我已经有了一个基本的动画，但我希望能够随意启动和停止 - 最好使用简单的函数和无/限制的jquery。使用按钮播放/停止动画

到目前为止，我只是简单地将播放状态从“已暂停”状态切换到“正在运行”状态，但是这种方式没有奏效 - 点子？

这是到目前为止我的代码：

HTML：

<div id="Arena"></div> 
<div id="PlayButton" class="Button" onClick="onclick = AnimationStart"></div>

的Javascript：

var AnimationStart; 

var AnimationStart = function(){ 
    document.getElementById('Arena').style.animationPlayState="running"; 
    alert("The onclick is working!"); 
}

CSS：

<style type="text/css"> 

#Arena{ 
    color:#FFF; 
    width:400px; 
    height:300px; 
    animation-iteration-count:infinite; 
    animation-play-state:paused; 
    animation:colorchange 20s; 
    -moz-iteration-count:infinite; 
    -ms-iteration-count:infinite; 
    -o-iteration-count:infinite; 
    -webkit-iteration-count:infinite; 
    -moz-play-state:paused; 
    -ms-play-state:paused; 
    -o-play-state:paused; 
    -webkit-animation-play-state:paused; 
    -moz-animation:colorchange 20s; 
    -ms-animation:colorchange 20s; 
    -o-animation:colorchange 20s; 
    -webkit-animation:colorchange 20s; 
} 

@keyframes colorchange{ 
    0%{background:#FFF;} 
    5%{background:#000;} 
    10%{background:#FFF;} 
    15%{background:#000;} 
    20%{background:#FFF;} 
    25%{background:#000;} 
    30%{background:#FFF;} 
    35%{background:#000;} 
    40%{background:#FFF;} 
    45%{background:#000;} 
    50%{background:#FFF;} 
    55%{background:#000;} 
    60%{background:#FFF;} 
    65%{background:#000;} 
    70%{background:#FFF;} 
    75%{background:#000;} 
    80%{background:#FFF;} 
    85%{background:#000;} 
    90%{background:#FFF;} 
    95%{background:#000;} 
    100%{background:#FFF;}        
} 

@-moz-keyframes colorchange{ 
    0%{background:#FFF;} 
    25%{background:#000;} 
    50%{background:#FFF;} 
    75%{background:#000;} 
    100%{background:#FFF;} 
} 

@-webkit-keyframes colorchange{ 

     0%{background:#FFF;} 
    5%{background:#000;} 
    10%{background:#FFF;} 
    15%{background:#000;} 
    20%{background:#FFF;} 
    25%{background:#000;} 
    30%{background:#FFF;} 
    35%{background:#000;} 
    40%{background:#FFF;} 
    45%{background:#000;} 
    50%{background:#FFF;} 
    55%{background:#000;} 
    60%{background:#FFF;} 
    65%{background:#000;} 
    70%{background:#FFF;} 
    75%{background:#000;} 
    80%{background:#FFF;} 
    85%{background:#000;} 
    90%{background:#FFF;} 
    95%{background:#000;} 
    100%{background:#FFF;} 
} 

@-ms-keyframes colorchange{ 
    0%{background:#FFF;} 
    50%{background:#000;} 
    100%{background:#FFF;} 
} 

@-o-keyframes colorchange{ 
    0%{background:#FFF;} 
    50%{background:#000;} 
    100%{background:#FFF;} 
}

来源

2012-11-09 Paul Ferris

你能把它做成小提琴吗？ – Selvamani

这里你去：http://jsfiddle.net/2RfzF/ –

onClick="onclick = AnimationStart"应该是onClick="AnimationStart()"

来源

2012-11-09 04:55:53 Musa

onclick作品，它的动画的实际开始塞。 –

对不起！刚刚再次解决您的解决方案，它的工作原理。谢谢：D我必须记得在采取建议时真正检查我的语法... –

使用按钮播放/停止动画

回答

相关问题