javascript - jQuery .fadeOut() 然后 .show();不使用 keyup

Question

在 keyup 之后，我希望数字消失，所以我在 if 中尝试了 .fadeOut()，在 else 中尝试了 .show()。问题是它们在淡出后不会再出现。

    $('input').keyup(function() {
filter(this);

});

function filter(element) {
var value = $(element).val();

$("#sortable > li").each(function () {
    if ($(this).text().indexOf(value) > -1) {
        $(this).show();
        $(".number").fadeOut();
        $(".numberstwo").fadeOut();

        // $('#sortable').addClass("disable");
       // $("#sortable").draggable('disable');

    } else {
        $(this).hide();
        $(".number").show();
        $(".numberstwo").show();         
    }
});
}

Answer 1

这是因为fadeOut使用了css opacity，而show使用了css display。

基本上，当您执行 .fadeOut() 时，您会将元素的不透明度降低为 0，然后当您调用 .show() 时，什么也没有发生这种情况是因为它试图将显示属性设置为它已经存在的值……不透明度不受影响，并保持在 0。

您需要使用 .fadeIn() 将您的元素带回 View 。

http://api.jquery.com/fadeIn/

另一方面，.show() 应该与 .hide() 配对，后者将显示设置为“无”。