-1

含まれているdivにネストされた2つのdivがあり、2つのdivを継続的に切り替えたい。

  <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: 0px; margin: 0 auto; text-align: center;"></div>
      <div id="Devotion_alert" class="alert" style="position: relative; top: 20px; margin: 0 auto; margin-top: 10px; text-align: center;"></div>
    </div>
  </div>

$('#alerts').ready(function(){
    $('#Mass_alert').ready(function(){
    fadein_Mass();
    });
});

function fadein_Mass() {
    $('#Devotion_alert').fadeOut(600, function() {
    $('#Mass_alert').fadeIn(600);
    fadein_Devotion();
    });
}

function fadein_Devotion() {
    $('#Mass_alert').fadeOut(600, function() {
    $('#Devotion_alert').fadeIn(600);
    fadein_Mass();
    });
}

Mass_alertフェードアウト、フェードインのフェード効果でそれを実行できるようにしたいと思いますDevotion_alert。これを行うための最良の方法は何ですか？

編集 *これはうまくいきました*

  <div style="position: relative; top: 0px; width: 778px; margin: 0 auto;"> 
    <div id="alerts" style="float: right; width:260px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #101010;">
      <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: -17px; margin: 0 auto; text-align: center; width:100%; height: 20px;">devotion alert</div>
    </div>
  </div>

$(document).ready(function() {  
    var continuous = function () {
    $("#Mass_alert").fadeToggle(6000, 'swing');
    $("#Devotion_alert").fadeToggle(6000, 'swing');   
    };
    $("#Devotion_alert").hide();
    setInterval(continuous,600); 
});
4

2 に答える 2

1

jQueryを使用する場合は、次のことができます。

$('#Mass_alert').toggle(100);
$('#Devotion_alert').toggle(100);

これは、divの1つが最初に非表示になっていることを前提としています。トグルに渡される引数は、遷移効果の持続時間です。

于 2012-04-21T00:55:38.233 に答える
0 
var continuous = function() {
    $("#Mass_alert").fadeToggle(600);
    $("#Devotion_alert").fadeToggle(600);   
}

setInterval(continuous,600);

これは600msごとに継続的に発生します。

于 2012-04-21T01:26:53.710 に答える