순수한 자바 스크립트로 버튼 텍스트 전환

Question

나는이 site처럼 순수한 자바 스크립트로 만든 페이드 인 기능을 가지고 있습니다. 내가 필요로 무엇

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); 

을,하지만 난 행동을 달성하기 위해 뭔가를 싶었 변경 텍스트에서 페이드 인 전환은 전체 버튼이 아닌 텍스트에만 트리거됩니다.

이 방법이 있습니까?

Answer 1

당신은 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>

Answer 2

텍스트 색상을 변경하려면이 기능을 사용하여 RGBA를 사용하여 색상을 설정할 수 있습니다. A는 알파 채널을 나타냅니다.

그래서,이 같은 :

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