1

メニューボタンをクリックして、jQuery を使用してフルページ (html) の背景をアニメーション化しようとしています。W3school TryIt エディターで小さなトライアウトを作成したところ、うまくいきました。ただし、自分のサイトで使用したい場合は機能しません (そして、jQuery は一般的に機能しなくなります - アラートも表示されなくなります)。これを手伝ってくれる人はいますか?

これは Firebug が私に与えるエラーです:

SyntaxError: missing ) after argument list
[Break On This Error]   

$('.html').animate(left:'0px')

script.js?mcplzp (line 32, col 35)

これは私の実際のJSコードです:

$('.html').animate(left:'0px'

    (function ($, Drupal) {
        $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: "../css/pages.css"
    }).appendTo("head");

    if (jQuery) {  
        alert('jQuery is loaded!');  
        };

    $(document).ready(function()
    {
        $('.menu-704').click(function() 
            {
                $('.html').animate(left:'0px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-797').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-359').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-796').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });


    })(jQuery, Drupal);
4

1 に答える 1

0

以下を試してみてください。私がテストしたところ、うまくいくようです。

1) animate メソッドは次のように呼び出す必要があります。

$('.html').animate({left:'+=1250px'})

このようではありません：

$('.html').animate(left:'=+1250px')

渡す CSS プロパティと値 (この場合は「左」位置) は、ブラケット {} 表記で囲む必要があります。

2) 置き換えてみてください:

=+

と：

+=

3) html要素をターゲットにしている場合、要素自体で「html」のクラスを使用したくない場合があります。ドキュメントごとに 1 つのhtml要素しかないため、代わりに次のようにしてみてください。

$('html').click(etc...

4) 1 - 3 で説明した変更を実装すると、問題が解決するはずです。ただし、解決したら、コードを少しクリーンアップすることをお勧めします。これは、次回の問題のデバッグに確実に役立ちます。$(document).ready(function(){}); は 1 つだけ必要です。$('foo').click() イベントリスナーのすべてを設定します。

したがって、これの代わりに：

$(document).ready(function()
{
    $('.menu-797').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

$(document).ready(function()
{
    $('.menu-359').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

$(document).ready(function()
{
    $('.menu-796').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

これに単純化します。

$(document).ready(function()
{
    $('.menu-797,.menu-359,.menu-796').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});
于 2012-10-30T15:27:08.370 に答える