javascript - jQuery 隐藏、更改内容、显示

Question

我想用 ajax 改变一个 div 内容，但在隐藏它之前和改变之后，用 jQuery 动画显示它。

我当前的代码:

$(document).on("click", ".menuItem", function(){
    var contentName = $(this).attr("name");
    $( "#content > div" ).hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});

但它不起作用，因为当调用 html 方法时，新内容突然出现。 有什么办法可以解决这个问题吗？

提前致谢!

理查德

Answer 1

这里的问题是 $("#content") 元素总是可见的。在调用 ajax 之前，您在 #content -> $("#content > div") 中隐藏了一个 div。

您可以在添加内容之前隐藏 $("#content")。

$("#content").hide().html(responseText).show(1000);

或

    $("#content").hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText).show(1000);
            }
        });
    });