1

我正在尝试使用 jQuery 通过单击菜单按钮来为整页（html）背景设置动画。我在 W3school TryIt Editor 中创建了一个小型试用版，并且成功了。但是，当我想在自己的网站上使用它时，它不起作用（并且 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）你的动画方法应该这样调用：

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

不像这样：

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

您传递的 CSS 属性和值（在本例中为“左”定位）应包含在括号 {} 符号中。

2）尝试更换：

=+

和：

+=

3) 如果您的目标是html元素，您可能不想在元素本身上使用“html”类。由于每个文档只有一个html元素，请尝试这样做：

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

4) 如果您实施 1 - 3 中概述的更改，这应该可以解决您的问题。但是，一旦解决，您可能需要稍微清理一下代码，这肯定有助于下次调试问题。你只需要一个 $(document).ready(function(){}); 您将在其中设置所有 $('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 回答