fadeIn 或 show 不适用于由 ajax 加载/添加的元素

Question

我搜索了类似的问题，但没有运气。

如果我用ajax向DOM添加一个元素，我无法控制它。我知道，实时方法适用于事件，但我只想显示/淡出它。

有办法控制这些吗？

$("#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

我认为如果将所有加载的内容放入包装元素中并尝试切换此包装，效果会更好。顺便说一句，

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

这假设您的数据是 HTML。

编辑：看到您传递的数据，您可以轻松地这样做：

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

这将需要一个 #container-01{display:none;} 样式规则，但我想这应该没问题。

Answer 2

是的，您需要在回调函数上执行此操作，您将获取数据，然后淡入淡出。但是您可能需要在淡入之前先隐藏内容。您还可以隐藏容器 div 并执行 .load 来加载 html，然后在回调中淡入。

所以试试这个：

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

由于某种原因，就数据而言，它没有从 jsfiddle 获得任何东西。所以，我也只是在其中添加一些文字。
http://jsfiddle.net/G9Sa3/