.animate（）函數不工作（jQuery）

Question

我剛剛開始學習JQuery，我無法獲得此代碼的工作。我認爲沒關係，但它不起作用。有人能幫助我嗎？

HTML：

<div id="container"> 

    <ul id="menu"> 
     <li id="button1">Animar 1</li> 
    </ul> 

    <div id="box"></div> 

</div><!--Container--> 

JQUERY：

$(document).on("ready",main); 

function main(){ 
    $("#button1").on("click", animate1); 
} 

function animate1(){ 
    $("#box").animate({ 
     width: '100px' 
    }); 
} 

編輯：我添加CSS代碼，所以你也可以檢查此。我真的不知道這是否有必要，但在這裏。

CSS：

body{ 
    background: #4674A5; 
} 
#container{ 
    margin:100px auto; 
    width:500px; 
} 
#caja{ 
    background: #FF8000; 
    width:50px; 
    height:50px; 
} 
#menu{ 
    padding:0; 
    margin: 0; 
    text-align: center; 
} 
#menu li{ 
    color:white; 
    display: inline-block; 
    margin: 0; 
    list-style: none; 
    cursor: pointer; 
} 
#menu li:hover{ 
    color:#FF8000; 
} 

Answer 1

更改代碼

$(document).ready(function() { 
    main(); 
    function main(){ 
     $("#button1").on("click", animate1); 
    } 

    function animate1(){ 
     $("#box").animate({ 
     width: '100px' 
     }); 
    } 
});