我正在尝试动画模式。除最后六个模式外，所有模式都正常工作。我希望最后六个模式在所有其他模式发生之后一起发生。但是使用此代码它会以不同的方式振荡。 last6 模式不会同时发生。请帮助我 我的代码是
$j(document).ready(function () {
$j("#circle").show().animate({
top: '260px'
}, 1000, function () {
$j("#v_logo").animate({
opacity: '1'
}, 400, function () {
$j("#v_logo").animate({
height: '150px',
width: '100px',
top: '260px',
left: '450px'
}, 2000, function () {
$j("#s_logo").animate({
opacity: '1'
}, 400, function () {
$j("#s_logo").animate({
height: '150px',
width: '100px',
top: '260px',
left: '450px'
}, 2000, function () {
$j("#circle,#v_logo,#s_logo").animate({
height: '300px',
width: '200px',
top: '180px',
left: '380px'
}, 2000, function () {
$j("#circle,#v_logo,#s_logo").animate({
height: '100px',
width: '66px',
top: '110px',
left: '20px'
}, 1500, function () {
$j("#v").animate({
height: '120px',
width: '120px',
top: '300px',
left: '130px',
opacity: '1'
}, 500, function () {
$j("#s").animate({
height: '100px',
width: '100px',
top: '260px',
left: '260px',
opacity: '1'
}, 500, function () {
$j("#t").animate({
height: '120px',
width: '120px',
top: '300px',
left: '350px',
opacity: '1'
}, 500, function () {
$j("#u").animate({
height: '120px',
width: '120px',
top: '260px',
left: '460px',
opacity: '1'
}, 500, function () {
$j("#d").animate({
height: '120px',
width: '120px',
top: '300px',
left: '600px',
opacity: '1'
}, 500, function () {
$j("#y").animate({
height: '120px',
width: '120px',
top: '260px',
left: '710px',
opacity: '1'
}, 500, function () {
$j("#v").animate({
height: '120px',
width: '120px',
top: '280px',
left: '130px',
opacity: '1'
});
$j("#s").animate({
height: '100px',
width: '100px',
top: '280px',
left: '260px',
opacity: '1'
});
$j("#t").animate({
height: '120px',
width: '120px',
top: '280px',
left: '350px',
opacity: '1'
});
$j("#u").animate({
height: '120px',
width: '120px',
top: '280px',
left: '460px',
opacity: '1'
});
$j("#d").animate({
height: '120px',
width: '120px',
top: '280px',
left: '600px',
opacity: '1'
});
$j("#y").animate({
height: '120px',
width: '120px',
top: '280px',
left: '710px',
opacity: '1'
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
我的html代码是
<img src="circle.gif" id="circle"style="position:absolute;top:100px;left:450px;display:none;height:150px;width:100px" />
<img src="v_logo.gif" id="v_logo"style="position:absolute;top:340px;left:495px;opacity:0;height:2px;width:2px" />
<img src="s_logo.gif" id="s_logo"style="position:absolute;top:340px;left:520px;opacity:0;height:2px;width:2px" />
<img src="v.gif" id="v"style="position:absolute;top:300px;left:20px;height:120px;width:120px;opacity:0" />
<img src="s.gif" id="s"style="position:absolute;top:100px;left:260px;height:100px;width:100px;opacity:0" />
<img src="t.gif" id="t"style="position:absolute;top:550px;left:350px;height:120px;width:120px;opacity:0" />
<img src="u.gif" id="u"style="position:absolute;top:100px;left:460px;height:120px;width:120px;opacity:0" />
<img src="d.gif" id="d"style="position:absolute;top:550px;left:600px;height:120px;width:120px;opacity:0" />
<img src="y.gif" id="y"style="position:absolute;top:260px;left:970px;height:120px;width:120px;opacity:0" />
最佳答案
因为您在多个元素 $("#circle,#v_logo,#s_logo") 上设置动画，每个元素都会触发回调(在本例中为三次)。
您可以通过创建一个 bool 变量来防止这种情况发生。在第一个完成后切换 bool 变量，并防止其余代码运行多次。
此外，当多次为同一个元素设置动画时，您可以让 jQuery 的队列来完成繁重的工作；)
$(document).ready(function () {
$j = jQuery;
$j("#circle").show().animate({
top: '260px'
}, 1000, function () {
$j("#v_logo").animate({
opacity: '1'
}, 400);
$j("#v_logo").animate({
height: '150px',
width: '100px',
top: '260px',
left: '450px'
}, 2000, function () {
$j("#s_logo").animate({
opacity: '1'
}, 400);
$j("#s_logo").animate({
height: '150px',
width: '100px',
top: '260px',
left: '450px'
}, 2000, function () {
$j("#circle,#v_logo,#s_logo").animate({
height: '300px',
width: '200px',
top: '180px',
left: '380px'
}, 2000);
var firstDone = false;
$j("#circle,#v_logo,#s_logo").animate({
height: '100px',
width: '66px',
top: '110px',
left: '20px'
}, 1500, function () {
if(!firstDone) {
firstDone = true;
$j("#v").animate({
height: '120px',
width: '120px',
left: '130px',
opacity: '1'
}, 500, function () {
$j("#s").animate({
top: '260px',
opacity: '1'
}, 500, function () {
$j("#t").animate({
top: '300px',
opacity: '1'
}, 500, function () {
$j("#u").animate({
top: '260px',
opacity: '1'
}, 500, function () {
$j("#d").animate({
top: '300px',
opacity: '1'
}, 500, function () {
$j("#y").animate({
left: '710px',
opacity: '1'
}, 500, function () {
$j("#v").animate({
top: '280px'
});
$j("#s").animate({
top: '280px'
});
$j("#t").animate({
top: '280px'
});
$j("#u").animate({
top: '280px'
});
$j("#d").animate({
top: '280px'
});
$j("#y").animate({
top: '280px'
});
});
});
});
});
});
});
}
});
});
});
});
});img { border: 1px solid #00f; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="circle.gif" id="circle"style="position:absolute;top:100px;left:450px;display:none;height:150px;width:100px" />
<img src="v_logo.gif" id="v_logo"style="position:absolute;top:340px;left:495px;opacity:0;height:2px;width:2px" />
<img src="s_logo.gif" id="s_logo"style="position:absolute;top:340px;left:520px;opacity:0;height:2px;width:2px" />
<img src="v.gif" id="v"style="position:absolute;top:300px;left:20px;height:120px;width:120px;opacity:0" />
<img src="s.gif" id="s"style="position:absolute;top:100px;left:260px;height:100px;width:100px;opacity:0" />
<img src="t.gif" id="t"style="position:absolute;top:550px;left:350px;height:120px;width:120px;opacity:0" />
<img src="u.gif" id="u"style="position:absolute;top:100px;left:460px;height:120px;width:120px;opacity:0" />
<img src="d.gif" id="d"style="position:absolute;top:550px;left:600px;height:120px;width:120px;opacity:0" />
<img src="y.gif" id="y"style="position:absolute;top:260px;left:970px;height:120px;width:120px;opacity:0" />关于javascript - 动画模式无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30822105/