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

Question

我想使用悬停并通过动画使我的 div 变长

这有什么问题？更新：文档再次没有结果

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

score 3 · Accepted Answer

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

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

这

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

还有这个：

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

两者都是一样的。

根据您更新的代码：

如果你看看你的结束标签}，doc ready它仍然错过了一个正确的结束});

});
}

score 1 · Accepted Answer

将您的代码包装在 ready() 中

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

score 0 · Accepted Answer

您没有关闭函数括号。

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

演示

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

3 回答 3

根据您更新的代码：

Related

Reference