Question

考虑以下代码：

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

Answer 1

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

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

div {
    display : inline-block;
}

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

Answer 2

试试这个

您不必像{duration: 1000}那样指定持续时间，下面是更正后的代码并将持续时间设置为某个较小的值;

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

Demo

animate方法函数执行意外延迟

2 个答案: