淡入淡出 Ajax 搜索结果答案

【问题标题】：Fading in and out Ajax search results淡入淡出 Ajax 搜索结果
【发布时间】：2015-01-13 12:25:28
【问题描述】：

我目前在 Wordpress 中使用 Ultimate WP Query Search Filter 插件。当用户选择各种选项时，我试图让我的 Ajax 搜索结果淡入淡出。

$(document).ajaxStart(function() {
    $(".content").hide();
    })
.ajaxStop(function() {
    $(".content").fadeIn(1500);
});

当用户最初搜索并且没有内容时，这会成功，它会平滑淡入。但是，如果搜索结果在屏幕上并且用户选择了新选项，则内容将被隐藏而没有任何影响。选择新选项时是否可以淡出现有内容？

如果我将 ajaxStart 设置为淡出，则内容会在没有效果的情况下显示，然后淡入然后淡出。

【问题讨论】：

【解决方案1】：

在fadeOut动画结束后使用fadeOut()回调函数启动ajax。

$(".content").fadeOut(1500,function(){
    $(document).ajaxStart().ajaxStop(function() {
        $(".content").fadeIn(1500);
    });
});

【讨论】：

【解决方案2】：

你应该检查元素是否已经可见，例如：

if($(".content").is(':visible')) {
    $(".content").hide();
}

然后用新内容显示淡入。

【讨论】：

【解决方案3】：

$(document).ajaxStart(function() {
  $(".content").hide();
})
.ajaxStop(function() {
  $(".content").show(1500);
});

【讨论】：