fadeIn или show не работают с элементами, которые загружаются / добавляются ajax

Question

Я искал похожие вопросы, но безуспешно.

Если я добавлю элемент в DOM с помощью ajax, я не смогу его контролировать.Я знаю, что живой метод будет работать для событий, но я просто хочу показать / скрыть его.

Есть ли способ управлять ими?

$("#menu > div > ul > li > a").click(function(){
    var page = $(this).attr("href").replace('#','');
    $.ajax({
        url: page + '.php',
        beforeSend: function() { $("#page").fadeOut(); $('#loader').fadeIn("slow"); },
        complete: function() { $('#loader').fadeOut(); },
        success: function(data){
            $('body').append(data);
            $(data).show();
        }
    });
});

Данные содержат следующие и представляют собой строку;

<div id="container-01"> <div class="left"> left </div> <div class="right"> right </div> </div>

Спасибо.

Answer 1

Думаю, вам будет лучше, если вы поместите весь загруженный контент в элемент оболочки и попытаетесь включить эту оболочку. Sth, как:

...
success: function(data){
            $('#mywrapper').html(data);
            $('#mywrapper').show();
        }
...

Предполагается, что ваши данные HTML, кстати.

РЕДАКТИРОВАТЬ: видя переданные данные, вы можете легко сделать это так:

...
success: function(data){
            $('body').append(data);
            $('#container-01').show();
        }
...

Для этого потребуется правило стиля #container-01{display:none;}, но я думаю, что все должно быть в порядке.

Answer 2

Да, вам нужно сделать это с помощью функции обратного вызова, вы получите свои данные, а затем выполните fadein.Но вам может понадобиться сначала скрыть содержимое, прежде чем вы его добавите. Вы также можете скрыть контейнерный div и сделать .load, чтобы загрузить html, а затем fadein для обратного вызова.

wrapper = $('<div class="wrapper">')
$("body").append(wrapper)
$(wrapper).hide().html(data).show();

По какой-то причине он ничего не получает от jsfiddle, поскольку данные идут.Итак, я просто добавлю туда немного текста.http://jsfiddle.net/G9Sa3/

Answer 3

Я не знаю, как это объяснить. Но я нашел кое-что в этой ссылке , которая может решить вашу проблему.