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