Question

我正在尝试使用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);

Answer 1

您可能想尝试以下内容，我已经过测试，但它似乎有用。

1）您的动画方法应该像这样调用：

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

不喜欢这样：

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

您传递的CSS属性和值（在本例中为“left”定位）应以括号{}表示法包装。

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'});
    });
});

jQuery动画外部CSS故障

1 个答案: