連續動畫顯示或隱藏元素而不褪色

這是代碼：

$(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設置。如果我不這樣做，那麼隱藏元素留下的空間會干擾另一個元素的放置。

來源

2012-05-21 user823527

嘗試：

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-21 16:05:06 Yoshi

謝謝。這工作。 – user823527

有沒有辦法將淡入淡出的動畫添加到該切換？ – user823527

@ user823527你可以使用'fadeToggle'，雖然這看起來很奇怪，'slideToggle'可能會更好。 – Yoshi

嘗試只是來回切換。

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-21 16:00:36 Zeph

連續動畫顯示或隱藏元素而不褪色

回答

相關問題