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调用之前，你隐藏了一个div #content - ＆gt; $("#content > 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);
            }
        });
    });

Answer 2

试试这个

$(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").hide().html(responseText).show(1000);
            }
        });
    });
});

Answer 3

您可以先尝试隐藏内容：

$(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").hide();
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});

jQuery隐藏，更改内容，显示

3 个答案: