-1

我有两个 div 嵌套在一个包含的 div 中，并希望在两个 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 最初是隐藏的。传递给 toggle 的参数是过渡效果的持续时间。

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

setInterval(continuous,600);

这将每 600 毫秒连续发生一次。

于 2012-04-21T01:26:53.710 回答