Javascript 检查是否隐藏了具有相同类的所有元素

我有一个简单的问题，我有一个具有所有相同类名的列表，当单击其中一个时，它会在容器外设置动画，然后重定向您，等等。它还有一个隐藏按钮，当我将它们全部隐藏时，我想让浏览器在它们全部手动隐藏时提醒我，由于在单击按钮显示列表之前，列表已经隐藏在页面上，因此我不确定这是否会影响我的jquery

Html基本上是这样的-

<ul class="alertContainer"> <!-- Hidden until button is clicked to show -->
  <li class="alert"> </li>  <!-- each are removed one at a time -->
  <li class="alert"> </li>
  <li class="alert"> </li>
  <li class="alert"> </li>
<ul>

由于警报在网站加载时已经隐藏，我认为这是造成问题的原因，但当单击按钮时，警报变得可见，然后可以将其单独置于隐藏状态。我不确定是否最好将这段代码放在用于删除警报的代码中

jquery可以单独删除警报--

---

如果有人能帮助我，我将不胜感激。

请看下面的代码，并尝试用它替换上面列出的所有javascript

注意严格使用嵌套、回调和链接

$(document).ready(function() {

    $('.alert').click(function(event) {
        $(this).animate({
            marginLeft: "100%"
        }, 100, function() {
            $(this).attr("style","overflow-x:visible");
        }).fadeOut(200, function() {
            if ($(".alertContainer li:visible").length == 0) {
                alert('all are hidden');
            }
        });

    });

});

 $(document).ready(function() {
$('.alerts').click(function() {
     $(this).animate({ marginLeft: "100%"} , 100);
     $(this).attr("style","overflow-x:visible");

});
});

$(document).ready(function() {
  $('.alerts').click(function() {
     $(this).fadeOut(200);
  });
  });

$(document).ready(function() {

    $('.alert').click(function(event) {
        $(this).animate({
            marginLeft: "100%"
        }, 100, function() {
            $(this).attr("style","overflow-x:visible");
        }).fadeOut(200, function() {
            if ($(".alertContainer li:visible").length == 0) {
                alert('all are hidden');
            }
        });

    });

});