1

我有两个 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);
});
4

2 回答 2

1

Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.

于 2012-04-21T15:42:20.830 回答
0

当您观看时.fadeToggle()，您会看到以下属性的变化

opacity: 0;
display: none;

（正如亚历山大在他的回答中指出的那样。）

所以我把它复制到第二个 div 的样式属性中。但它没有用。我的假设是 jQuery 以某种方式跟踪它对元素所做的事情，但并没有真正识别出最初的 CSS。

我的想法是，jQuery 在某种程度上会跟踪它对元素所做的事情，但并不能真正识别 HTML 已经带有的样式。所以我从任何隐藏的相关属性中清除了 2nd div 的 CSS，并.hide()在“初始化函数”中添加了一个。

似乎工作（@jsFiddle）

于 2012-04-21T16:28:51.060 回答