jquery - 在 JQuery load() 之前运行动画

Question

我正在尝试利用 JQuery 的 load() 函数，但我很困惑为什么动画不会在加载请求之前发生。

例如，如果我有一个脚本:

$('#clickme').click(function() {
    $('#content').slideUp(500);
    $('#content').slideDown(500);
});

http://jsfiddle.net/593cC/

然后，事情就是这样发生的。它向上滑动，然后向下滑动。但是，如果我在这两行之间放置一个 load() 函数，它会完全忽略第一个动画行，只执行其余的行。

$('#clickme').click(function() {
    $('#content').slideUp(500);
    $('#content').load('myotherpage.php').hide();
    $('#content').slideDown(500);
});

http://jsfiddle.net/593cC/1/

这是为什么呢？我尝试在操作上添加 delay() 但没有成功。我可以采取什么措施来防止这种情况发生，以便我的事件在进出时产生良好的效果？

非常感谢，所以

Answer 1

它确实可以正确滑动，但是，由于 .load 清空了元素，看起来好像它立即发生，因为元素的高度突然变成 0+padding。

我建议不要在这里使用 .load:

$('#clickme').click(function() {
    // get data
    var request = $.get("myotherpage.php");
    $('#content').slideUp(500,function(){
        // when request is done AND the element is hidden, apply content and slide it back down.
        request.done(function(html){
            $('#content').html( $.parseHTML(html) ).slideDown(500);
        });
    });
});

只要请求花费的时间少于 500 毫秒，slideUp 和 SlideDown 之间就不会出现延迟。