Question

I’d like to continuously show and hide two page elements in turn.

This is the code:

$(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); 
});

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

I get the right effect once. What should I change in the code above to have the continuous effect. I don’t want to use fadeToggle, because, I actually need the display:none setting. If I don’t then there is space left for the hidden element that interferes with the placement of the other element.

Answer 1

try:

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

​
with:

<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>​

demo: http://jsfiddle.net/qxMdA/1/