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

Question

我想用ajax chage 一个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")元素总是可见的。#content在 ajax 调用之前，您在->中隐藏了一个 div $("#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);
            }
        });
    });
});