.animate() 函数不起作用（JQuery）答案

【问题标题】：.animate() function not working (JQuery).animate() 函数不起作用（JQuery）
【发布时间】：2014-06-19 12:39:19
【问题描述】：

我刚刚开始学习 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;
}

【问题讨论】：

请始终考虑设置与您的问题相关的描述性标题...
请考虑将您的标题编辑为与问题更相关的内容。 "My JQuery code doesn't work" 对其他人没有帮助。
请务必添加一个 jsfiddle
除了 #box 在没有任何样式的情况下是不可见的这一事实之外，Your code 似乎工作正常……你能解释一下究竟是什么不工作..？
抱歉，我已经将标题编辑为更具体的标题。我的英语不太好，但我会试着解释一下自己。问题是我之前使用过 JQuery 来为滚动条设置动画，以便页面可以移动。但我现在无法让任何代码工作。我已经尝试了你们所有的代码，但它们都不适合我。一切都很好地连接起来，所有的 ID 属性都匹配。我还没有下载任何 JQuery 框架，但我认为这不是问题，因为我之前已经能够使用它。会是什么？

标签： jquery html

【解决方案1】：

将代码更改为

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

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

【讨论】：

@KingofPopup's 因为您可以使用 on() 绑定伪就绪事件，但这不会利用用于触发伪事件的内部延迟对象，即使已经触发
我认为@KingofPopup 想说的是，Op 的代码至少可以按原样工作。问题出在其他地方。在他看来.on问题是次要的。
@A.Wolff 对不起，老实说我没听懂你的意思。我tried this 看到问题并且函数在加载时触发。所以我的问题是 - 这个答案如何修复 OP 的不工作代码..？到底是什么不工作..？
@KingofPopup's 我的意思是，使用 on()，那么这将不起作用（包含在 onload 方法中）：jsfiddle.net/jAx5L/3 这可能是或不是 OP 的问题，这取决于上下文如何/何时发布调用 sn-p。 OP肯定会更好地改善他的问题