Question

我想使用悬停并使我的div变得更长动画

这有什么问题？更新：再没有doc的结果

 <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div").hover(function(){
        $(this).animate({ width: "200px" });
    }, function() {
        $(this).animate({ width: "100px" });
    });
    }
    </script>
    <style>
    div.ex
    {
    width:20px;
    padding:10px;
    background-color:gray;
    margin:0px;
    }
    </style>
    </head>
    <body>
    <form>
    <div class="ex"></div>
    </form>
    </body>
    </html>

Answer 1

您必须将代码包装在doc ready处理程序中：

$(function(){
   $("div").hover(function(){
      $(this).animate({ width: "200px" });
   }, function() {
      $(this).animate({ width: "100px" });
   });
});

这个

$(function(){
  ......
});

和此：

$(document).ready(function(){
   .......
});

两者都是一样的。

根据您更新的代码：

如果您查看}的结束标记doc ready，它仍然错过了正确的结束});

});
}

Answer 2

将代码包装在ready（）

中

 $(function(){
       $("div").hover(function(){
           $(this).animate({ width: "200px" });
       }, function() {
          $(this).animate({ width: "100px" });
       });
    });

Answer 3

您没有关闭功能支架。

 $(document).ready(function(){
$("div").hover(function(){
    $(this).animate({ width: "200px" });
}, function() {
    $(this).animate({ width: "100px" });
});
} <---- you are missing ')'

更改您的代码，如下所示

$(document).ready(function(){
$("div").hover(function(){
    $(this).animate({ width: "200px" });
}, function() {
    $(this).animate({ width: "100px" });
});
});

Demo

如何触发悬停并为div设置动画

3 个答案:

根据您更新的代码：