Javascript “动画方法”函数执行意外延迟

考虑以下代码：

<script>
$(document).ready(function() {
    $("#showmenu").click(function() {
        $(".menu").animate({width: "toggle"}, {duration: 1000});
    });
});
</script>

...

<div id="showmenu"><a href="#">Hide/Show Menu</a></div>
<div class="menu">
    <ul>
        <li>My</li>
        <li>Handsome</li>
        <li>Menu</li>
    </ul>
</div>

$（文档）.ready（函数（）{
$（“#显示菜单”）。单击（函数（）{
$（“.menu”）.animate（{width:“toggle”}，{duration:1000}）；
});
});
...

我的
潇洒
菜单

隐藏菜单时，动画将立即执行。这是预期的行为。但是，当菜单可见时，在动画执行之前，会有1秒的延迟（实际上是

duration

参数）

我怎样才能消除这种延迟？我的代码有问题吗

你可以在这里试试：

试试这个

您不必像这样指定持续时间

{duration:1000}

，下面是正确的代码并将持续时间设置为某个小值

$(document).ready(function() {
    $("#showmenu").click(function() {
        $(".menu").animate({width: "toggle"},100);
    });
});

---

没什么不好的：这只是元素太大的长度！看到这把小提琴了吗

然后，您应该根据内容调整宽度！例如：

div {
    display : inline-block;
}

---

看到这个：

动画开始前没有延迟：Wolff说你应该在菜单中添加一个

宽度；我的菜单实际上比预期的要大，而且确实没有延迟。非常感谢。看看a.Wolff的评论。最好不要为
宽度
设置
动画
，而不要设置
动画
但看不清楚