淡入淡出Ajax搜索结果

Question

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

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

当用户最初搜索并且没有内容时，这可以成功运行，它会顺利淡入淡出。但是，如果屏幕上显示搜索结果并且用户选择了新选项，则隐藏内容而不会产生任何影响。当选择新选项时，是否可以淡出现有内容？

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

Answer 1

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

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

然后使用新内容显示淡入淡出。

Answer 2

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

Answer 3

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

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