淡入淡出 Ajax 搜索结果

Fading in and out Ajax search results

本文关键字：搜索结果 Ajax 淡出 淡入      更新时间：2023-09-26

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

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

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

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

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

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

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

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

，然后显示淡入新内容。

$(document).ajaxStart(function() {
  $(".content").hide();
})
.ajaxStop(function() {
  $(".content").show(1500);
});
相关文章：