animate方法函数执行意外延迟

animate method function performs unexpected delay

本文关键字：意外 延迟 执行 函数 方法 animate      更新时间：2023-09-26

考虑以下代码：

<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>

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

我该如何消除这种延迟？我的代码有问题吗？

你可以在这里试试：http://jsfiddle.net/dwq26xf6/

没什么不好的：这只是元素太大的长度！看看这把小提琴：http://jsfiddle.net/dwq26xf6/.

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

div {
    display : inline-block;
}

请参阅：http://jsfiddle.net/dwq26xf6/6/

试试这个

你不必像这个{duration: 1000}那样指定持续时间，下面是更正后的代码，并将持续时间设置为一些小值；

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

演示

相关文章：