-2

I'm having difficulty getting another function to work after one has just completed. The first half of my code works, but the function afterwards doesn't. What am I doing wrong?

The HTML

<div id="feature">
    <div id="open"></div>
</div>

The CSS

#feature {
    position:relative;
    width:100%;
    height:450px;
}
#open {
    position:relative;
    width:100%;
    height:200px;
    background:red;
}

The jQuery

$('#open').click(function () {
    $(this).animate({
        height: 50
    }, {
        duration: 'slow'
    }).css('overflow', 'visible'),
    function () {
        $('#open').animate({
            height: 200
        }, {
            duration: 'slow'
        })
    };
    // Animation complete.
});

A JS Fiddle.

http://jsfiddle.net/C8fA7/

4

2 回答 2

0

该函数必须是 的参数animate，但您已将其放在 之后css，在您完成对 的调用很久之后animate。试试这个：

$(this).animate({
    height: 50
}, {
    duration: 'slow'
}, function () {
    $('#open').animate({
        height: 200
    }, {
        duration: 'slow'
    })
}).css('overflow', 'visible');

如果我们明确链接，这会变得更清楚：

var temp = $(this);
temp = temp.animate({ height: 50 }, { duration: 'slow' });
temp = temp.css('overflow', 'visible');

那时，您只剩下这个杂散功能：

function () {
    $('#open').animate({ height: 200 }, { duration: 'slow' });
}

那里没有语法错误，但它什么也没做，因为它从未被调用过。

此外，您的评论// Animation complete表明您可能没有意识到动画是异步的。当你完成animate语句时，动画已经开始，但它还没有结束。动画完成时将调用您的回调函数；调用后的语句animate不会等待。

于 2013-04-21T23:58:31.990 回答
0

这是最简单的方法：

// Do stuff (Pt. 1)
setTimeout(function() {
    // Do more stuff (Pt. 2)
    setTimeout(function() {
        //Do even more stuff (Pt. 3)...
    }, 0);
}, 0);

不确定 ES/JS 是否打算以这种方式使用 setTimeout，但即使指定了 0ms 的持续时间，该函数仍然遵循等待第一个函数（或动作）的 when/then 或 when/done 'sequence'在继续之前完成。后续函数被称为“回调”，尽管我认为这是一个糟糕的词选择——它们不会回调任何东西并继续前进！

于 2021-04-16T14:40:57.597 回答