2

jQuery の animate() を使用して、ボタンを押したときにいくつかの div をアニメーション化する簡単な練習ページを作成しようとしましたが、うまくいきません。行 29 でキャッチされない構文エラーが発生しています$(.red).animate...なぜこれが起こるのですか?

<!DOCTYPE html>
<html>
    <head>
        <title>ANIMATE WITH JQUERY</title>
        <meta charset = "utf8">
        <link rel = "stylesheet" href = "anim.css">
        <script src = "jq/jquery-1.10.2.js"></script>
    </head>
    <body>
        <button id = "but1">animate 1</button>
        <button id = "but2">animate 2</button>
        <div class = "red"></div>
        <div class = "red"></div>
        <div class = "red"></div>
        <div id = "blue"></div>
        <div id = "grey"></div>

        <script>
            $(document).ready(function() {
                $('#but1').click(animateOne);
                $('#but2').click(animateTwo);
            });

            function animateOne() {
                $('.red').animate({margin-left:"200"},{duration:2000});
                $('#blue').animate({margin-top:"30"},{duration:1000});
                $('#grey').animate({margin-bottom:"200"},{duration:1500});
            }

            function animateTwo() {
                $('.red').animate({margin-left:"400"},{duration:2000});
                $('.red').animate({opacity:"0.2"},{duration:3000});
                $('#blue').animate({margin-top:"30"},{duration:1000});
                $('#grey').animate({margin-bottom:"200"},{duration:1500px});
            }
        </script>
    </body>
</html>
4

3 に答える 3

1

関数animateOne()に終了中かっこ がありません}。これが、構文エラーが発生する理由です。

それ以外の

function animateOne(){
    $('.red').animate({margin-left:"200"},{duration:2000});
    $('#blue').animate({margin-top:"30"},{duration:1000});
    $('#grey').animate({margin-bottom:"200"},{duration:1500});

そのはず：

function animateOne(){
    $('.red').animate({margin-left:"200"},{duration:2000});
    $('#blue').animate({margin-top:"30"},{duration:1000});
    $('#grey').animate({margin-bottom:"200"},{duration:1500});
}
于 2013-09-07T05:10:14.897 に答える
1

次の構文を試してください。

$('.red').animate({ 'margin-left' : 200 }, 2000);

CSS プロパティは、DOM に相当するもの (通常は marginLeft のようなキャメルケース) であるか、引用符で囲まれている必要があります。

于 2013-09-07T04:45:28.760 に答える
0

構文エラーは、ダッシュを使用して変数名を作成しようとしているためです-。したがって、機能していません。jQuery では、ダッシュを必要とする CSS 名は引用符で囲むことができます'。"、または単語をキャメルケースにすることができます。

たとえば、次の行

$('.red').animate({margin-left:"200"},{duration:2000});

次のようにする必要があります。

$('.red').animate({'margin-left':"200"},{duration:2000});

また

$('.red').animate({"margin-left":"200"},{duration:2000});

また

$('.red').animate({marginLeft:"200"},{duration:2000});

したがって、JavaScript の完全な書き直しは次
のようになります。

$(document).ready(function() {
    $('#but1').click(animateOne);
    $('#but2').click(animateTwo);
});

function animateOne() {
    $('.red').animate({'margin-left':"200"},{duration:2000});
    $('#blue').animate({'margin-top':"30"},{duration:1000});
    $('#grey').animate({'margin-bottom':"200"},{duration:1500});
}

function animateTwo() {
    //  jQuery Chaining means you don't need to
    //  recall this element to add another event
    $('.red').animate({'margin-left':"400"},{duration:2000})
        .animate({'opacity':"0.2"},{duration:3000});

    $('#blue').animate({'margin-top':"30"},{duration:1000});

    //  Also, you had error here with 1500px,
    //  if you intend to use px as a size value,
    //  it too will need to be enclosed in Quotes
    $('#grey').animate({'margin-bottom':"200"},{duration:1500});
}

例

変数名の詳細については、このスタック オーバーフローの質問も参照してください。

JavaScript 変数名に有効な文字は?

于 2014-04-14T13:20:53.037 に答える