Строки таблицы, скрывающие Jquery hide () vs fadeOut ()

Question

Я пытаюсь повторно применить чередование таблиц из Bootstrap после скрытия строк таблицы с помощью Jquery. Флажок используется, чтобы скрыть строки, в которых ячейка содержит «Нет». Когда я использую функцию hide (), чередование применяется правильно после скрытия строк, но если я использую функцию fadeOut (), чередование применяется неправильно

$(document).ready(function () {
    $('#customSwitch1').change(function () {
        if (!this.checked) 
            $('#indexTable tr td:contains(No)').parent().fadeIn('fast');
        else 
            $('#indexTable tr td:contains(No)').parent().hide();

        $("#indexTable tr:visible").each(function (index) {
            $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
    });
    });
    $('#customSwitch1').change();

});

Если я заменю hide () на fadeout, чередование не будет применено правильно (или не поместит длительность в функцию скрытия)

Answer 1

Вам необходимо использовать функцию обратного вызова в вашей функции исчезновения, чтобы строки фактически были невидимыми / видимыми при запуске кода для повторного применения чередования.В противном случае анимация функции затухания не будет выполнена, строка все еще будет видна, а полоса будет испорчена

$(document).ready(function () {
    $('#customSwitch1').change(function () {
        if (!this.checked) {
            $('#indexTable tr td:contains(No)').parent().fadeIn('slow', reapplyStripes);
        }else {
            $('#indexTable tr td:contains(No)').parent().fadeOut('slow', reapplyStripes);
        }
    });
    $('#customSwitch1').change();

});

function reapplyStripes() {
$("#indexTable tr:visible").each(function (index) {
            $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
    });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<input type="checkbox" id="customSwitch1" />
<table class="table table-striped" id="indexTable">
<tr>
<td>YES</td>
</tr>
<tr>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
</tr>
</table>