动画模式不能正常工作

Question

我正在尝试动画模式。除最后六个之外的所有模式都正常工作。在所有其他模式发生之后，我希望最后六个模式一起发生。但是使用这个代码它会以不同的方式振荡。 last6模式不会一起发生。 Plz帮助我 我的代码是

$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" />

Answer 1

因为您在多个元素$("#circle,#v_logo,#s_logo")上设置了动画，所以每次都会触发回调（在这种情况下为三次）。 您可以通过创建布尔变量来防止这种情况发生。在第一个完成后切换布尔变量，并防止其余代码运行多次。

此外，在多次动画相同元素时，您可以让jQuery的队列进行艰苦的工作;）

＆＃13;

＆＃13;

$(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'
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                              }
                        });
              
                });
      
        });
    
});
});

＆＃13;

img { border: 1px solid #00f; }

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;