setInterval問題

Question

我在'click'事件上遇到setInterval問題。我已經產卵了一個隱藏的div。但我想同步產卵和淡入淡出，只能淡入淡出。

var anchor = document.getElementById('anchor'); 
       var hiddenElement = document.getElementById('hiddenElement'); 
       var bkgFade = document.getElementById('bkgFade'); 

       anchor.addEventListener('click', spawnImage, false); 
       hiddenElement.addEventListener('click', despawnImage, false); 
       function spawnImage() { 
        setInterval(function() { 
         document.getElementById('hiddenElement').style.display = 'block'; 
         document.getElementById('bkgFade').style.visibility = 'visible'; 
         hiddenElement.style.opacity += 1.0; 
        } 1000); 


       } 

       function despawnImage() { 
        document.getElementById('hiddenElement').style.display = 'none'; 
        document.getElementById('bkgFade').style.visibility = 'hidden'; 
       } 

Answer 1

這段代碼是沒有意義的我：

function spawnImage() { 
    setInterval(function() { 
     document.getElementById('hiddenElement').style.display = 'block'; 
     document.getElementById('bkgFade').style.visibility = 'visible'; 
     F hiddenElement.style.opacity += 1; 
    }); 
    clearInterval(); 
} 

有多種事情不對的地方。

1. 您並未設定時間爲setInterval()。
2. 您不存儲從setInterval()返回的值。
3. 你沒有通過任何東西clearInterval()。它應該通過setInterval()的返回值。它不會以你擁有的方式做任何事情。
4. 此行是不合法的javascript：F hiddenElement.style.opacity += 1;
5. 我不明白你爲什麼會setInterval()，然後立即clearInterval()
6. 加1，在計時器的時間間隔不透明度是不會完成任何事情。這隻會讓它在一個巨大的步驟中顯現出來。
7. 直接操作opacity將無法​​在某些版本的IE中工作。
8. 您在一個地方使用document.getElementById('hiddenElement')，在另一個地方使用hiddenElement。如果hiddenElement有效，請使用這兩個地方。如果不是，則使用document.getElementById('hiddenElement')這兩個地方。

如果你更詳細地描述了你真的想用這段代碼完成什麼，那麼人們可能會幫助你拿出正確的代碼。

我強烈建議使用像jQuery或YUI這樣的庫來完成動畫，因爲它的使用方式更易於使用，並且可以跨瀏覽器使用。