JavaScript的Fx：如何淡入東西，等沒有框架？

我想了解如何對Javascript進行淡入淡出和類似效果。我經常得到答案，比如爲什麼不使用Jquery，mootools等？我想想知道如何工作，然後我不介意使用任何這些框架。JavaScript的Fx：如何淡入東西，等沒有框架？

我目前正在學習如何對DOM進行更改，所以我已經閱讀了很多有關此主題的內容。另外，我已經閱讀了Reflow，但仍然沒有在Repaint上找到很酷的，但我會繼續搜索。

從看到源文件等，我看到了一些方法，我不知道他們是否已經創建或是JS的核心方法。

我的問題是，是否有任何資源，我可以學習所有這些整潔的東西，如平滑的位置變化，衰落元素槽不透明或其他等？

2009-11-12 punkbit

這裏是在Firefox和Chrome工作的例子。即不尊重不透明風格。

var ELEMENT; 
    var STEPS; 
    var INTERVAL; 
    var COUNT; 
    var TIMERID; 

    // 5 * 200ms = 1 second 
    STEPS = 5; 
    INTERVAL = 200; 

    function Button1_onclick() { 

     ELEMENT = document.getElementById("foo"); 
     COUNT = STEPS - 1; 
     TIMERID = setInterval(Fade, INTERVAL); 
    } 

    function Fade() { 

     ELEMENT.style.opacity = String(COUNT/STEPS); 
     COUNT--; 

     if (COUNT < 0) { 
      clearInterval(TIMERID); 
      TIMERID = 0; 
     } 
    }

setInterval和clearInterval是標準的js函數。他們將每x毫秒執行一次給定的函數。在我們的情況下，當我們擊中0不透明時，我們會殺死它。

滑動窗口是一個類似的過程。你可以設置左/右/上/下風格而不是不透明。

來源

2009-11-12 22:36:34 lincolnk

哇！非常感謝，非常好的想法：D – punkbit 2009-11-12 22:44:43

使用javascript淡入淡出基本上是以編程方式修改元素的不透明度。「平滑度」是通過使用定時器完成的。相同的位置/大小的變化。您需要閱讀CSS以瞭解您需要使用JavaScript控制的元素的樣式屬性。

如果你真的很好奇，你可以潛入衣在GitHub上的源：http://github.com/yui

來源

2009-11-12 22:06:11

嗨！我很酷的CSS，我要去檢查Javascript的計時器。那就是我一直在想的東西;）謝謝 – punkbit 2009-11-12 22:09:40

看看emile.js。這是全新的品牌。偉大的方式來學習如何做你自己的。

在最近的jsconf會議上介紹。由Thomas Fuchs撰寫（script.aculo.us）。

http://github.com/madrobby/emile

埃米爾單機CSS動畫

JavaScript的迷你框架

並不需要 JavaScript框架

全套CSS 屬性動畫（基於長度的和顏色）

寬鬆和回調

以下超過50行代碼

獲取有關 Twitter的更新：http://twitter.com/emilejs

來源

2009-11-12 22:46:05 Nosredna

JavaScript的Fx：如何淡入東西，等沒有框架？

回答

相關問題