javascript - Jquery 隐藏/显示不适用于动画

Question

我试图隐藏结果 div。修改它。然后用动画显示。

我有以下内容:

$("#SearchButton").button().click(function() {
                $("#resultContainer").hide();
                $("#resultContainer").empty();
                searchResults();
                $("#resultContainer").show("slow");
});

searchResults() 调用 ajax 将一些内容加载到 div #resultContainer

但是，即使我注释掉 //searchResults(); 这行，当我点击按钮时，我仍然会得到一个空白的 div。

但是，如果我将 $("#resultContainer").show("slow"); 切换为 $("#resultContainer").show(); 它工作正常。但我想要动画。 .show("slow") 在其他地方工作正常......

更新:我现在有:

$("#SearchButton").button().click(function() {
                $("#resultContainer").hide(0);
                searchResults();
            });

然后 searchResults 使用以下回调执行 ajax 调用:

//appending something to the div here              
$("#resultContainer").show(600);
alert("test");

我收到警报，但 div 从未显示备份...

Answer 1

你的代码可以改进，试试这个:

$(function() {
    var $resultContainer = $("#resultContainer");
    $("#SearchButton").click(function() {
        $resultContainer.hide();
        //$resultContainer.empty(); // BTW, no need to empty since the ajax will replace its content anyway!
        searchResults();
    });

    function searchResults() {
        $.ajax({
            url: "yourRequest.php",
            success: function(resp) {
                $resultContainer.html(resp);
                $resultContainer.show("slow");
            }
        });
    }
});

1. 您不需要清空容器，因为它的内容无论如何都会在 ajax 调用中被替换，而且它已经隐藏了!
2. 将 show 方法移除到 ajax 成功回调
3. 将容器存储在 var $resultContainer 中，并使用它来加快访问速度。

这是一个直播 example .