animation pattern not working properly

Question

i am trying the animation pattern.All paterns except the last six are working properly. I want the last six pattern to happen together after all other patternshave happened.But using this code it oscillates in a different manner. The last6 pattern doesn't happen together. Plz help me My code is

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

my html code is

<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

Because you animate on multiple element $("#circle,#v_logo,#s_logo") the callback is fired for each (three times in this case). You can prevent this from happening by creating a boolean variable. Switch the boolean variable once the first is complete and prevent the rest of the code to be run muktple times.

Also, when animating the same element multiple times, you can let jQuery's queue do the hard work ;)

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