Javascript 连续动画，在不褪色的情况下显示或隐藏元素

我想连续地依次显示和隐藏两个页面元素

代码如下：

$(document).ready(function() {  
    var continuous = function () {
    setTimeout(function() { $("#Mass_alert").css('display','block'); $("#Devotion_alert").css('display','none'); },1500);
    setTimeout(function() { $("#Mass_alert").css('display','none'); $("#Devotion_alert").css('display','block'); },1500);
    };
    setInterval(continuous,500); 
});

这是HTML：

  <div id="Mass_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">Mass alert</div>
  <div id="Devotion_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">devotion alert</div>

大规模警报
奉献警觉

---

我有一次得到了正确的效果。我应该在上面的代码中更改什么才能持续生效。我不想使用fadeToggle，因为我实际上需要

display:none

设置。如果我没有，那么隐藏元素的空间会干扰其他元素的放置

试着来回切换

var a = false;
$(document).ready(toggle);
function toggle() {
    if (a) {
        $("#Mass_alert").css('display','block'); $("#Devotion_alert").css('display','none'); 
    }
    else
    {
        $("#Mass_alert").css('display','none'); $("#Devotion_alert").css('display','block'); 
    }

    a = !a;

    setTimeout(toggle, 1500);
}

尝试：

​ 与：

大规模警报
奉献警觉​

---

演示：

有没有办法在切换中添加淡入淡出动画？@user823527您可以使用

fadeToggle

，尽管这看起来很奇怪，

slideToggle

可能更好。

setInterval(function () {
  $('#Mass_alert, #Devotion_alert').toggle();
}, 1500);

<div id="Mass_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px;">Mass alert</div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 3px; margin: 0 auto; text-align: center; width:100%; height: 20px; display: none;">devotion alert</div>​