Question

我有两个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); 
});

Answer 1

如果您使用jQuery，您可以执行以下操作：

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

这假设其中一个div最初是隐藏的。传递给切换的参数是过渡效果的持续时间。

Answer 2

var continuous = function() {
    $("#Mass_alert").fadeToggle(600);
    $("#Devotion_alert").fadeToggle(600);   
}

setInterval(continuous,600);

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

自动在两个div之间切换

2 个答案: