我想连续依次显示和隐藏两个页面元素。
这是代码:
$(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
设置。如果我不这样做,那么就会为隐藏元素留下空间,从而干扰其他元素的放置。
最佳答案
尝试:
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>
关于javascript - 连续动画显示或隐藏元素而不褪色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10688429/