Question

我刚刚开始一个jQuery教程，我对jQuery动画的加载顺序有一个基本的问题。

当我使用以下HTML代码时，单击链接会导致警报和隐藏动画出现：

 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
       $("a").click(function(event){
         event.preventDefault();
         $(this).hide("slow");
       });
     });
   </script>
 </body>

但是，当我从document.ready函数中取出第二个单击功能时，代码看起来就像下面一样，弹出窗口显示，文本消失，但隐藏动画不会发生。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
   <style>
    a.test { font-weight: bold; }
  </style>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
     $("a").click(function(event){
       event.preventDefault();
       $(this).hide("slow");
     });
   </script>
 </body>
 </html>

有人可以解释为什么隐藏动画只出现在第一个例子而不是第二个例子吗？

Answer 1

这是因为，在您的第二个示例中，对click()的最后一次调用位于ready处理程序之外。

有可能在执行该调用时DOM还没有准备好，因此处理程序没有绑定，之后也没有动画。

Answer 2

这是因为第二个处理程序未附加到div上的所有锚<a>标记。

 $("a").click(function(event){ //This function will execute as the script loads
                               // and during this time, DOM might have been loaded yet
   event.preventDefault();
   $(this).hide("slow");
 });

但，将其包装在里面。

$(document).ready(function() {

    // DOM is loaded

});

首先确保先加载DOM，然后附加处理程序。

加载jquery动画的顺序

2 个答案: