animate方法函数执行意外延迟

时间:2014-09-16 16:27:08

标签: javascript jquery

考虑以下代码:

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

2 个答案:

答案 0 :(得分:1)

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

然后您应该根据内容调整宽度!例如:

div {
    display : inline-block;
}

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

答案 1 :(得分:0)

试试这个

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

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

Demo