как совершить действие после окончания setinterval

li елементы по одному пропадают и только когда у всех будет свойство opacity = 0, нужно добавить ul - display: none. И наоборот когда ul - display: block добавить к li - Opacity: 1

html:

<span id="searchIcon"></span>
<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

js:

$("#searchIcon").click(function() {
                $(this).toggleClass("active");
                if ($("#searchIcon").hasClass("active")) {
                    var listContainer = document.getElementById("ul");
                    var list = listContainer.getElementsByTagName("li");
                    var i = list.length-1;
                    var interval = setInterval(function() {
                        if ( i > -1) {
                            list[i--].style.opacity = "0"; 
                        }
                    }, 60);
                } else {
                    var i = 0;
                    var interval = setInterval(function() {
                        var listContainer = document.getElementById("ul");
                        var list = listContainer.getElementsByTagName("li");
                        if (list.length > i) {
                            list[i++].style.opacity = "1"; 
                        } else {
                            clearInterval(interval);
                        }
                    }, 60);
                }
            });