1

jQueryを使って簡単なアニメーションを作ろうとしています。スクリプトを外部（外部ファイル）および内部（スクリプトタグ内）に追加しようとしました。ページがアラート機能を使用してスクリプトを認識しているかどうかをテストしましたが、スクリプトは実行されません。私はそれが構文と関係があると考えています。

$("#container5").hover(function() {
        //hover in
        $(#container5).animate({
            height: "250",
            width: "250",
            left: "-=50",
            top: "-=50",
            }, "fast");
            }, function() {
            //hover out
            $(#container5).animate({
            height: "200",
            width: "200",
            left: "+=50",
            top: "+=50",
            }, "fast");
        }
    })(jQuery);
4

3 に答える 3

0

準備ができていないハンドラーに加えて、構文が少しずれています。

1: #container は常に引用符で囲む必要があります Ex: $('#container5') - または、同じコンテナー上にあるため、ホバー アニメーションで $(this) を使用できます

2: top の後に余分なコンマがあります: "+=50" - それを削除します。animate または {} 内の何かの最後の行には、最後にコンマを含めることはできません。

3: 準備完了関数に入れます。

更新されたコードは次のとおりです。

$(document).ready(function(){
    $("#container5").hover(
    function() {
        $(this).animate({height: "250", width: "250", left: "-=50", top: "-=50"}, "fast");
    }, 
    function() {
        $('#container5').animate({height: "200", width: "200", left: "+=50", top: "+=50"}, "fast");
    });
});

注意してください: $(this) と $('#container5') を使用しました。この例では、これらの両方を同じ意味で使用できます。 より動的なイベントについて知りたい場合は、$(this) を読んでください。

于 2012-12-14T23:13:35.540 に答える
0

コードを準備完了関数でラップする必要があります。問題は、DOM の準備が整う前に jQuery が実行されていることです。これは機能します。

jQuery(document).ready(function($){
    $('#container5').animate({
       height: "250",
       width: "250",
       left: "-=50",
       top: "-=50"
    }, "fast");
});
于 2012-12-14T23:06:38.550 に答える
0

コードを準備済みのハンドラーでラップする必要があります。さらに、文字列を引用符でラップする必要もあります。

また、Hellion が述べているように、関数の設定が壊れているようです。実行している時点で jQuery を関数に渡すべきではありません。$代わりに、パラメータとして aを使用して、すべてのコードを無名関数でラップし、それに jQuery を渡す必要があります。これは、グローバル$変数を使用する可能性のある他のライブラリから保護するためです。

将来、これらの問題を検出するのに役立つ 3 つのこと。

  • インデントを具体的にしてください。これにより、問題がはるかに簡単に強調表示されます。
  • 構文/コードが強調表示されたテキスト エディターを使用します。これにより、文字列が間違っていることがわかります。
  • どのブラウザを使用していても、エラー コンソールを確認してください。これにより、不正な構文レイアウトに関するヒントが得られます。

以下はあなたの問題を解決するはずです：

;(function($){
  $(function(){
    $('#container5').hover(
      function(){
        $('#container5').animate({
          height: "250",
          width: "250",
          left: "-=50",
          top: "-=50",
        },"fast");
      },
      function() {
        $('#container5').animate({
          height: "200",
          width: "200",
          left: "+=50",
          top: "+=50",
        },"fast");
      }
    );
  });
})(jQuery);
于 2012-12-14T23:07:33.227 に答える