0

2 つのページ要素を順番に連続して表示および非表示にしたいと考えています。

これはコードです：

$(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。そうしないと、他の要素の配置を妨げる隠し要素用のスペースが残っています。

4

2 に答える 2

2

試す：

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

デモ: http://jsfiddle.net/qxMdA/1/

于 2012-05-21T16:05:06.880 に答える
0

前後に切り替えてみてください。

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);
}
于 2012-05-21T16:00:36.120 に答える