Question

我有两个div，我想要显示一个并持续隐藏另一个。我的代码只显示了第一个Mass_alert。我必须修复什么才能依次显示和隐藏两个div。

这是HTML。

  <div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
    <div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;"> 
      <div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
      <div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
    </div>
  </div>

执行淡入淡出切换的代码就是这个。

$(document).ready(function() {  
    show_next_Mass(channel_array_sort);
    show_next_devotion();
    setInterval("show_alerts()",10000);

    var continuous = function () {
        $("#Mass_alert").fadeToggle(600);
        $("#Devotion_alert").fadeToggle(600);   
    };

    setInterval(continuous,600);
});

Answer 1

根据this API doc判断，您需要使用display: none;代替visibility: hidden;作为隐藏元素。

Answer 2

当您观看.fadeToggle()时，您会看到对以下属性的更改

opacity: 0;
display: none;

（亚历山大也在他的回答中指出。）

所以我把它复制到了第二个div的style属性。但它没有用。我的假设是jQuery以某种方式跟踪它对元素所做的事情但不能真正识别初始的CSS。

我的想法是jQuery在某种程度上跟踪它对元素所做的工作，但却没有真正认识到HTML已经具有的风格。所以我从任何隐藏相关属性中清除了第二个div的CSS，并将.hide()放在“初始化函数”中。

seems to work (@jsFiddle)

Fadetoggle显示和隐藏两个div

2 个答案: