淡入淡出 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);
    });
});

Fading in and out Ajax search results