jquery затухание, загрузка, затухание

Я использую JQuery, и я хочу, чтобы это произошло.

Div исчезает с помощью команды fadeOut. Затем он загружает содержимое с URL-адреса с помощью команды загрузки. Затем, как только контент загружен, он снова появляется с помощью команды fadeIn.

Код у меня есть:

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

Однако это не работает. Он как бы мигает, затем загружается, а затем загружается. Я думаю, проблема в том, что затухание происходит до завершения загрузки.

Что я должен делать

Спасибо


jquery jquery-effects
person John    schedule 30.04.2010    source источник

Ответы (4)


arrow_upward
11
arrow_downward

вы можете использовать функцию обратного вызова 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();
    }
});
person hunter    schedule 30.04.2010
comment
Это потому, что загрузка асинхронная и другие действия будут продолжать работать? Ваш ответ будет ждать, чтобы вызвать fadeIn после того, как загрузка сообщит об этом, верно? - person MrChrister; 30.04.2010

arrow_upward
9
arrow_downward 

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

Ограничение указывает, как долго ждать ответа в вызове загрузки.

person jweber    schedule 30.04.2010

arrow_upward
5
arrow_downward

Используйте обратный вызов success для .load(), например:

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

arrow_upward
1
arrow_downward

вам нужно сделать затухание в функции обратного вызова загрузки из-за асинхронного характера AJAX.

person Ty W    schedule 30.04.2010