자바스크립트 를 활용하여 만들수있나요?

Question

자바스크립트를 이용하여서 html에서 버튼를 눌럿을시 원하는 이미지에 fade 효과를 줄수있는 방법으로 는 어떠한 방법이있나요 ? for loop 과 while 을 사용했을시 페이지가 멈춰버리네요...

Answer 1

안녕하세요.

방법은 여러가지 있을수 있는데.. 간단히 하자면 굳이 for문 사용 안하고 setTimeout이라는 함수를 써서 일정시간마다 흐려지게 하면 되겠네요. 아래 예제 참고하세요.

해보시고 안되시면 댓글로 알려주세요.

<예제>

<input type="button" value="fade" onclick="fade()"><br>

<img id="img1" src="https://www.a-ha.io/images/meta/default.jpg" >

<script>

var i = 10;

var j = 0;

function fade() {

i--;

j = i *0.1;

setOpacity(j);

}

function setOpacity(val) {

img1.style.opacity = val;

setTimeout(function() { fade() }, 100);

}

</script>

Answer 2

안녕하세요.

이미지에 페이드 효과를 주려면 투명도를 점점 작게 해서 계속 호출하면 될 것 같습니다.

일정시간 후에 실행하라는 함수로 setTimeout() 이 있는데 이 함수를 써서 일정시간 간격으로 이미지의 투명도를 점점 흐리게 하는 겁니다.

스마트폰이라 자세한 설명을 하기가 힘든데 대충 이런식으로 하면 될 것 같네요.

setTimeout(투명도조절함수, 200);

Answer 3

구글링을 해보니 대부분 JQuery를 이용해서 하더군요...

JQuery를 사용하지 않은 것을 찾아보니 아래 블로그가 나오더군요

데모로 만든것을 보니 잘 동작하는 것 같습니다.

출처 : https://m.blog.naver.com/PostView.nhn?blogId=cosmosjs&logNo=221698390526&proxyReferer=https:%2F%2Fwww.google.com%2F

Answer 4

안녕하세요~! 아하(Aha) 지식답변자 다라닝입니다.

질문하신 내용에 대하여 아래와 같이 답변 드립니다.

간단하게 제이쿼리 라이브러리를 활용하여

.fadein() .fadeout() 으로 원하는 효과를 보실수 있을것 같습니다.

(자바스크립트 확장해서 가능하십니다)

부족하지만 도움이 되셨기를 바라며 추가적인 문의가 필요하시면 답변 부탁드려요!