动画模式无法正常工作

我正在尝试动画模式。除最后六个以外的所有模板正常工作。在所有其他patternhave发生后，我希望最后的六种模式一起发生。但使用此代码时，它会以不同的方式振荡。 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" />

来源

2015-06-13 Kushagra Singh Rajput

你介意分享的HTML呢？并请添加一些关于您想要完成的细节。 – BillyNate

@BillyNate我已添加。请参阅 –

@SinghRajputKushagra你能买得起另一个图书馆吗？我认为你会同意，这似乎很难维持。我推荐[GSAP]（http://greensock.com/gsap）。 ['TimelineMax']（http://greensock.com/timelinemax）更具体。 –

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

此外，同一元素多次动画时，可以让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" />

来源

2015-06-13 19:11:51 BillyNate

谢谢problemm得到解决。这是非常有用的 –

，但可以ü放置我没有得到它的逻辑 –

什么部分的逻辑，你没有得到？回调如何被触发三次或者jQuert队列是如何工作的？ – BillyNate

动画模式无法正常工作

回答

相关问题