JQuery AJAX success + fadeIn

Question

Я использую AJAX для загрузки содержимого опроса в контейнер на странице, и во время перехода я fadeOut контейнер и fadeIn, когда это будет сделано. Он отлично работает для страниц 1-4, но перестает работать на странице 5. Содержимое загружается для страницы 5, но контейнер не fadeIn.

success: function(data){ 
    $("div#surveyContainer").fadeOut(function(){ 
     $("div#surveyContainer").html(data).hide().fadeIn(); 
    }); // end fadeout 
} 

Там нет ссылки на surveyContainer где-нибудь в странице 5. Все, что я могу думать о том, что что-то таймаут заставляя fadeIn не получить срабатывает. Время загрузки составляет около 36 мс. Я установил сценарий php туда, где он отправляет data, чтобы сообщать обо всех ошибках (и данные вносят его в Db просто отлично), но все, что я получаю, это контент, который я ожидаю, но контейнер остается display:none. Если я удалить затухает, все работает отлично:/

Я также попытался это не дало никаких результатов:

success: function(data){ 
    $("div#surveyContainer").fadeOut(function(){ 
     $("div#surveyContainer").html(data); 
     $("div#surveyContainer").fadeIn(); 
    }); // end fadeout 
} 

Answer 1

Не ссылайтесь на http://code.jquery.com/jquery-latest.js со страницы с помощью шифрования (HTTPS). Локальный код локально.

Answer 2

Попробуйте добавить .stop();see reference here

success: function(data){ 
    $("div#surveyContainer").fadeOut(function(){ 
     $(this).html(data).stop(true, true).fadeIn(); 
    }); // end fadeout 
} 

Это должно остановить любой анимации, в настоящее время происходят, заставляют их идти прямо к своей конечной точке (где они анимируются) и очищать очередь анимации. Вы, вероятно, тоже можете избавиться от hide().

Кроме того, вы можете просто использовать this внутри обратного вызова, ну, я не знаю почему. но вы можете.

Answer 3

Не знаете, почему он разбился бы на отдельной странице tho.

Может быть, вы могли бы попробовать его в функцию обратного вызова из .hide():

$("div#surveyContainer").html(data).hide('slow', function(){ 
    $(this).fadeIn(); 
}); 

Как Interstellar_Coder указал. Вы уже скрыли div#surveyContainer, когда вы его погасли. Теперь нужно просто загрузить свои данные и исчезать его.

success: function(data){ 
    $("div#surveyContainer").fadeOut(function(){ 
     $(this).html(data).fadeIn(); // Removed the .hide() 
    }); // end fadeout 
}