jQuery外部动画故障CSS

Question

我想通过点击菜单按钮来使用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); 

Answer 1

你可能想尝试以下，这是我测试过，它似乎工作。

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