使用純Javascript的按鈕文本轉換

我使用純javascript做了淡入淡出功能，因爲site顯示。使用純Javascript的按鈕文本轉換

function fadeIn(el) { 
    var opacity = 0; 

    el.style.opacity = 0; 
    el.style.filter = ''; 

    var last = +new Date(); 
    var tick = function() { 
    opacity += (new Date() - last)/400; 
    el.style.opacity = opacity; 
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')'; 

    last = +new Date(); 

    if (opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
    } 
    }; 

    tick(); 
}

我需要的是在按鈕文字的更改應用於此過渡，是這樣的：

var firstChild = document.getElementById('my-button').firstChild; 
firstChild.data = 'Another text'; 
fadeIn(firstChild);

當然，這並不正常工作，但我想要的東西，實現了行爲在更改文本上，僅在文本中觸發淡入淡出，而不是觸發整個按鈕。

有沒有辦法做到這一點？

來源

2016-12-26 Chittolina

你有正確的代碼有什麼不工作？ – 2016-12-26 04:59:12

其實我想改變淡入淡出的文字，並不知道如何去做。我正在更新我的問題。 – Chittolina

檢查我的答案，如果有效，你可以接受 – 2016-12-26 05:13:33

由於您使用的則firstChild我假設你的文字按鈕元素的子元素中，如果是這樣的話，這將工作。

點擊底部藍色的「運行代碼片段」按鈕，看看它在運行。

btn.addEventListener('click', function(){fadeOut(this.firstChild, newText)}); 
 

 
var newText = "World!"; 
 

 
function fadeOut(e, nT) { 
 
o=1; 
 
t=setInterval(function() { 
 
    if(o <= 0.1){ 
 
    clearInterval(t); 
 
    e.style.filter = "alpha(opacity=0)"; 
 
    if(nT != undefined) { 
 
    e.innerHTML = nT; 
 
    fadeIn(e); 
 
    } 
 
} 
 
    e.style.opacity = o; 
 
    e.style.filter = 'alpha(opacity='+o*100+")"; 
 
    o-=o*0.05; 
 
}, 10); 
 
} 
 

 
function fadeIn(e) { 
 
o=0; 
 
t=setInterval(function() { 
 
    if(o >= 0.9){ 
 
    clearInterval(t); 
 
    e.style.filter = "alpha(opacity=1)"; 
 
    } 
 
    e.style.opacity = o; 
 
    e.style.filter = 'alpha(opacity='+o*100+")"; 
 
    o+=0.05; 
 
}, 25); 
 
}

#btn { 
 
    color: Black; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<button id="btn"><p>hello</p></button>

來源

2016-12-26 05:38:38 user2267175

要更改文字顏色，使用此功能，可以使用RGBA設置它的顏色--A代表Alpha通道。

所以，這樣的事情：

el.style.color = "rgba(0,0,0, "+ OPACITY +")" // Opacity is 0 - 1

你也可以使你的代碼更加模塊化，讓您在這個淡入淡出功能編輯任何樣式屬性。

function fadeIn(el,prop,color) { 
    var opacity = 0; 

    el.style[prop] = 0; 

    var last = +new Date(); 
    var tick = function() { 
    opacity += (new Date() - last)/400; 
    el.style[prop] = "rgba("+color+","+opacity+")"; 

    last = +new Date(); 

    if (opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
    } 
    }; 

    tick(); 
}

現在你可以做兩個：

fadeIn(firstChild,"background", "255,0,0"); // fade in background to red 
fadeIn(firstChild,"color", "0,0,0"); // fade in text to black

來源

2016-12-26 05:06:06

使用純Javascript的按鈕文本轉換

回答

相關問題