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（“慢”）在其他地方工作得很好......

更新：我现在有：

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

你不需要清空容器，因为它的内容将在ajax调用中被替换，无论如何它已经被隐藏了！
将您的show方法移至ajax success callback
将容器存储在var $resultContainer中，并使用它来更快地访问。

这是一个实时example。

Answer 2

显示结果div的代码：

$("#resultContainer").show("slow");

应链接在ajax调用的回调中;这是你可以确定它会被执行的唯一方法之后的ajax结果。请参阅load（）函数末尾的optionnal函数回调。或者jQuery的ajax函数中的回调。

您可以使用类似jquery队列的东西来排队事件并暂停该队列。然后在你的ajax回调中取消暂停队列。

或者定义一些命名函数并测试这些回调是否存在，然后在ajax回调中调用它们。

最后，请存储您的选择器结果var $ foo = $（“＃resultContainer”）并在此之后使用$ foo变量，并避免每次需要该div时调用$（）选择器。这可以加快您的代码速度。

Jquery隐藏/显示不使用动画

2 个答案: