0

ホバーを使用して、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>
4

3 に答える 3

3

doc readyコードをハンドラーでラップする必要があります。

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

これ

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

この：

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

どちらも同じです。

更新されたコードに従って：

終了タグ}を見るとdoc ready、まだ適切な終了がありません});

});
}
于 2013-03-30T14:27:01.767 に答える
1

コードを ready() でラップします 

 $(function(){
       $("div").hover(function(){
           $(this).animate({ width: "200px" });
       }, function() {
          $(this).animate({ width: "100px" });
       });
    });
于 2013-03-30T14:27:25.610 に答える
0

関数ブラケットを閉じていません。

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

デモ

于 2013-03-30T14:39:40.560 に答える