2

我正在尝试利用 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()进行操作但没有成功。我能做些什么来防止这种情况发生，这样我的事件就会有很好的进出效果？

非常感谢，所以

4

4 回答 4

3

它确实可以正确滑动，但是，由于 .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 之间就没有延迟。

于 2013-05-01T17:45:15.430 回答
2

尝试使用函数load的内部回调slideUp：

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

更新小提琴

于 2013-05-01T17:40:52.883 回答
1

尝试这个：

$('#content').slideUp(500).load('myotherpage.php', function () {
    $('#content').slideDown(500);
});
于 2013-05-01T17:44:38.407 回答
1

将您的负载放在slideup回调和负载slidedown的回调中（因为它是异步的）。 http://jsfiddle.net/cwSXa/

。加载（）

$(document).ready(function () {

    $('#clickme').click(function () {
        $('#content').slideUp(500, function () {
            $('#content').load('myotherpage.php', function () {
                $('#content').slideDown(500);
            });
        });
   });
});
于 2013-05-01T17:45:39.140 回答