Fadetoggle to show and hide two divs

Question

I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert . What must I fix to show and hide both divs in turn.

Here is the 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>

The code to do the fade toggle is this one.

$(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

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

Answer 2

When you watch what .fadeToggle() does you see the change to the following attributes

opacity: 0;
display: none;

(As also Alexander pointed out in his answer.)

So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.

My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".

seems to work (@jsFiddle)