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