使用jQuery交替png轉換

非常基本的問題。我有一個非常簡單的網頁設計，利用png與透明度，覆蓋另一個基本圖像。這裏的想法是，它持續循環可視性，快速淡入淡出，顯示更長的時間間隔，快速淡出，並保持不可見狀態，並保持相同的更長時間間隔，基本上從一天之後複製動畫GIF的行爲。 png以display設置爲none開頭。使用jQuery交替png轉換

我的問題是jQuery似乎沒有「暫停」或「延遲」事件處理程序來幫助這裏。有很多插件填補了這個空白，但是如果有一種我錯過的簡單方法，我寧願不加入一個插件。這可能需要回落setInterval或setTimeOut，但我不確定這樣做的語法。

我想示意是一樣的東西：

--loop start-- 

$("#pngOverlay").fadeIn(1000); 

(5000 delay) // using setTimeout or setInterval if jQuery method unavailable 

$("#pngOverlay").fadeOut(1000); 

(5000 delay) 

--loop repeat--

下做的行爲一次，所以我想，如果這可以在一個循環它可能工作包裹，但它不打我優雅或正確的方式。

setTimeout(function() { 
     $("#pngOverlay").fadeIn(1000); 
    }, 5000); 

    setTimeout(function() { 
     $("#pngOverlay").fadeOut(1000); 
    }, 10000);

感謝您的任何建議。我只會使用GIF，但需要透明度。（在過去，我們使用GIF動畫，我們喜歡他們...）

來源

2009-09-18 boomturn

是這樣的嗎？

setInterval(function() 
{ 
    var elm = $('#pngOverlay'); 
    if (elm.is(':hidden')) 
     elm.fadeIn(1000); 
    else 
     elm.fadeOut(1000); 
}, 5000);

來源

2009-09-18 15:13:18 Greg

謝謝，工作正常。這是最優雅的一個，不會想到使用條件。一件奇怪的事情是：使用CSS display隱藏了png：none attr，not visibility：hidden。當我嘗試使用可見性：隱藏該腳本時，它不再有效。有趣。 – boomturn 2009-09-18 16:58:30

有關使用animated PNG如何？

來源

2009-09-18 15:07:34 Linus

或沒有爲它的緣故惱人的動畫？ – 2009-09-18 15:10:47

我曾考慮過使用ANPG，但不支持瀏覽器，現在還沒有。我想學習如何做到這一點，我現在正在使用jQuery來處理很多其他的東西（但顯然需要更多練習！）。 FWIW，動畫是「安靜的」 - 意味着非常微妙並且不立即觀察，因此需要長時間間隔。 – boomturn 2009-09-18 16:28:43

我看到的一個技巧是讓jQuery執行一個5000毫秒的動畫，它沒有可見的效果。

$("#pngOverlay").animate({opacity:1}, 5000);

如果該物品的不透明度爲1，則該物品不具有可見效果，但會暫停5秒。

來源

2009-09-18 15:11:50

好的提示。我玩動畫，但沒有考慮將其用於事實上的任何事情。我希望jQuery有內置定時器/延遲... – boomturn 2009-09-18 17:01:25

<script language="JavaScript" type="text/javascript"> 
function showimage(){ 
    $("#pngOverlay").fadeIn(1000); 
    setTimeout('hideimage()',5000); 
} 

function hideimage(){ 
     $("#pngOverlay").fadeOut(1000); 
    setTimeout('showimage()',5000); 

} 
$(document).ready(function() { 
    showimage(); 
}); 
</script>

來源

2009-09-18 15:27:29 coder62

謝謝，應該想到一個回調循環。這個和下面的評論都適合我。 – boomturn 2009-09-18 16:35:51

使用jQuery交替png轉換

回答

相關問題