jQuery淡出、加载、淡入

Question

我正在使用jQuery，想要实现的效果是：

使用fadeOut命令使div淡出，然后使用load命令从url加载内容，加载完毕后使用fadeIn命令使其重新淡入。

我已经写了如下代码:

$("#myDiv").fadeOut().load('www.someurl.com').fadeIn()

然而这并不起作用。它在闪烁一下后就加载出去了，然后再次加载进来。我认为问题在于淡入淡出是在加载完成之前发生的。

我该怎么办？

谢谢

- John

Answer 1

您可以像这样使用load()回调函数：

$("#myDiv").fadeOut().load("www.someurl.com", function(response, status, xhr) {
    $(this).fadeIn();
});

您可能希望使用load()调用的状态来查看是否已成功完成所有操作。

$("#myDiv").fadeOut().load("www.someurl.com", function(response, status, xhr) {
    if (status == "error") {
        // handle error
    }
    else
    {
        $(this).fadeIn();
    }
});

- hunter

---

这是因为“load”是异步的，而其他操作将继续工作吗？你的答案会等待调用“fadeIn”，直到加载报告完成，对吗？ - MrChrister

Answer 2

$("#myDiv").fadeOut(1000, function () {
    $("#myDiv").load("www.someurl.com", {limit: 25}, function(){
        $("#myDiv").fadeIn();
    });
});

限制指定在load调用中等待答案的时间长度。

- jweber

Answer 3

使用.load()的success回调函数，例如：

$("#myDiv").fadeOut().load('www.someurl.com', function() {
  $(this).fadeIn();
});

- Nick Craver

Answer 4

由于 AJAX 的异步特性，您需要在加载回调函数中执行淡入操作。

- Ty W