2012-12-18 22 views
0

嗨,我試圖讓一段文本淡入和淡出自動沒有點擊或懸停方法。javascript:使用淡入和淡出的脈衝文本?

我不確定我是否可以使用頁面加載功能,因爲我想要淡入淡出的文本只出現在用戶單擊以打開頁面上的另一個div之後。 (我可能是錯的?)

我正在使用這個腳本,但文本是靜態的,沒有做任何事情。任何人都可以告訴我我要去哪裏?由於

<script> 
function cycle() { 
    $('#morebutton-pics').fadeOut(1000, function() { 
     $('#morebutton-pics').fadeIn(1000); 
     cycle(); 
    }); 
} 
$(document).click(function(){ 
    cycle(); 
}); 

</script> 
+0

能否請您包括相關的'html' – Sharlike

+0

或者,更重要的是,告訴我們,讓文本「*用戶點擊打開頁面*另一格後會出現」代碼。可能這是您的錯誤,因爲您的輪詢解決方案無法正常工作。無論如何,在展會上觸發動畫將是更好的選擇。 – Bergi

回答

6

這聽起來像它會是一個CSS動畫更好:

#morebutton-pics { 
    animation: pulse 1s alternate infinite; 
    -webkit-animation: pulse 1s alternate infinite; 
} 
@keyframes pulse { 
    from {opacity:1} 
    to {opacity:0} 
} 
@-webkit-keyframes pulse { 
    from {opacity:1} 
    to {opacity:0} 
} 

這將在Firefox,Chrome和IE10工作。由於這比所需的功能更具視覺效果,這對我來說似乎是可以接受的。

+0

偉大的答案,比JavaScript方式更好,更輕:) –

0

$(document).click(function(){ 
    cycle(); 
}); 

$(document).ready(function() {cycle(); }); 

更換,如果DIV是隱藏不重要

+0

錯誤 - '.ready()'需要函數引用,而不是調用'cycle()'的_result_。 – Alnitak

+0

現在它是正確的,但不是downvoting你可以糾正它(關鍵「編輯」是爲此) – furins

+1

我只是在海報已經證明線索的正確答案。你的回答仍然不能解決OP在循環功能中的缺陷。它也可以寫成'$(document).ready(cycle)'而沒有附加的函數包裝器。 – Alnitak

2

雖然,CSS可能是更好的答案,你的代碼不會因爲它的工作反覆呼叫cycle()而不用等待第二個動畫完成。

function cycle() { 
    var $el = $('#morebutton-pics'); 

    $el.fadeOut(1000, function() { 
     $el.fadeIn(1000, cycle); // loop in the second callback 
    }); 
} 
+0

這給出了語法錯誤 –

+0

@KevinReeves謝謝 - 修正 – Alnitak

+0

@Alnitak:不,他在外部回調中使用'cylcle'。這將隨着時間的推移產生無限的動畫鏈(執行的長度是雙倍長度),而不是堆棧溢出等。 – Bergi