我想要实现的是创建一个动画按钮（类似于gif图像） 我做了动画，但我无法动画它们。尝试使用setInterval，它可以工作一段时间但动画相互重叠。它需要在IE9中工作
这是我的代码http://jsfiddle.net/9q5hqas8/
HTML
<a href="#" class="animated-btn">
<span class="icon"></span>
<span class="text1">Play Now</span>
<span class="text2" style="display:none;">Download for free</span>
<span class="radial"></span>
<span class="moving"></span>
</a>
CSS
.animated-btn {
display: block;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dc0f0f), to(#920f0f));
background-image: -webkit-linear-gradient(top, #dc0f0f, #920f0f);
background-image: -moz-linear-gradient(top, #dc0f0f, #920f0f);
background-image: -ms-linear-gradient(top, #dc0f0f, #920f0f);
background-image: -o-linear-gradient(top, #dc0f0f, #920f0f);
background-image: linear-gradient(top, #dc0f0f, #920f0f);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
margin: 100px auto;
width: 284px;
font-family: Arial, sans-serif;
height: 66px;
overflow: hidden;
position: relative;
text-decoration: none;
}
.animated-btn span {
display: inline-block;
text-transform: uppercase;
vertical-align: top;
color: #fff;
text-align: center;
-webkit-text-shadow: 0 -1px 1px #4c4b4b;
-moz-text-shadow: 0 -1px 1px #4c4b4b;
text-shadow: 0 -1px 1px #4c4b4b;
height: 66px;
line-height: 66px;
font-size: 28px;
}
.animated-btn span.icon {
width: 50px;
height: 66px;
background: url("") no-repeat 100% 50%;
}
.animated-btn span.text1 {
width: 210px;
display: inline-block;
text-align: center;
text-transform: uppercase;
}
.animated-btn span.text2 {
width: 210px;
display: inline-block;
text-align: center;
font-size: 18px;
}
.animated-btn span.radial {
width: 0px;
height: 0px;
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
-moz-box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
position: absolute;
top: 50%;
left: 10%;
}
.animated-btn span.moving {
width: 0px;
height: 0px;
-webkit-box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
position: absolute;
top: 50%;
left: -10%;
}
JS
<script type="text/javascript">
$(document).ready(function(){
var counter = setTimeout(function() {
animate_btn();
});
function animate_btn(){
var step;
var handle = null;
var colors = [
'rgba(255, 255, 255, 0.00)',
'rgba(255, 255, 255, 0.30)',
'rgba(255, 255, 255, 0.60)',
'rgba(255, 255, 255, 0.90)',
'rgba(255, 255, 255, 1)'
];
setTimeout(function() {
var x = 0;
handle = setInterval(function() {
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20);
x++;
if (x > colors.length) {
clearInterval(handle);
handle = null;
}
}, 1);
}, 150);
setTimeout(function() {
var x = 4;
handle = setInterval(function() {
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20);
x--;
if (x < 0) {
clearInterval(handle);
handle = null;
}
}, 1);
}, 300);
setTimeout(function() {
$('.moving').css({"left":"-10%"});
$('.moving').animate({"left":"110%"}, 400);
}, 1000);
setTimeout(function() {
$(".animated-btn").children(".text1").delay(600).show("pulsate", {times:1}, 600, function(){
$(".animated-btn").children(".text1").delay(400).effect("pulsate", {times:1}, 600, function(){
$(".animated-btn").children(".text1").delay(800).hide("pulsate", {times:1}, 600, function(){
$(".animated-btn").children(".text2").delay(400).show("pulsate", {times:1}, 600)
});
});
});
}, 2100);
setTimeout(function() {
var x = 0;
handle = setInterval(function() {
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20);
x++;
if (x > colors.length) {
clearInterval(handle);
handle = null;
}
}, 1);
}, 6250);
setTimeout(function() {
var x = 4;
handle = setInterval(function() {
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20);
x--;
if (x < 0) {
clearInterval(handle);
handle = null;
}
}, 1);
}, 6400);
setTimeout(function() {
$('.moving').css({"left":"-10%"});
$('.moving').animate({"left":"110%"}, 400);
}, 6600);
setTimeout(function() {
$(".animated-btn").children(".text2").delay(400).effect("pulsate", {times:1}, 600, function(){
$(".animated-btn").children(".text2").delay(800).hide("pulsate", {times:1}, 600, function(){
$(".animated-btn").children(".text1").delay(400).show("pulsate", {times:1}, 600);
});
});
}, 7000);
}
counter = setInterval(function() {
animate_btn();
}, 15000);
});
</script>
答案 0 :(得分：0)
尝试动画链接而不是单独的setTimeouts。这是通过在动画时间之后添加一个函数来完成的。动画完成后会调用此函数，这会阻止您的动画互相踩踏。
例如：
function animate_btn()
{
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20, function() // called at the end of animation
{
$('.radial').animate({
boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
}, 20, function() // called at end of animation
{
animate_btn(); // recursion
});
});
}