자바스크립트 hover animation 추가 채택완료
서울서클
4년 전
조회 1,806
html
</p>
<p><img id="logo_img" src="<?php echo G5_IMG_URL; ?>/logo_ex1.png"</p>
<p>onmouseover="hover(this);" onmouseout="unhover(this);" /></p>
<p>
javascript
</p>
<p>function hover(element) {</p>
<p>element.setAttribute('src', '<?php echo G5_IMG_URL; ?>/logo_ex2.png');</p>
<p>}</p>
<p> </p>
<p>function unhover(element) {</p>
<p>element.setAttribute('src', '<?php echo G5_IMG_URL; ?>/logo_ex1.png');</p>
<p>}</p>
<p>
현재 코드는 이러합니다. hover시 이미지가 바뀌도록 했는데,
저는 추가적으로 fade in과 같은 부드러운 전환 효과를 주고싶습니다.
자바스크립트에 어떤 함수를 추가해야할까요??
답변 기다리겠습니다 :)
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
서울서클
4년 전
hover시 바뀌는 에니메이션이라 감이 잡히지 않네요,, 보내주신 링크는 자동으로 바뀌는 에니메이션의 경우더라구요! 그래도 참고해서 문제 해결해보겠습니다 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
꼭 자바스크립트로만 하셔야 하는 이유가 있을까요..?
같은 div 에 이미지 2장넣고 hover시 바껴야할 이미지는 opacity:0 으로 해놓고
css로 호버했을때 서로 opacity 만 조절하면 될거같은데요..
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
서울서클
4년 전
div로 주면 이미지 자체의 사이즈 조정이 안되더라구요... 그래도 다시 한번 해봐야겠습니다 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
�
서울서클
4년 전
이미지 전환하는 걸 자바스트립트로 사용해서 fade in/out을 자바스크립트에서 어떻게 줘야할지 모르겠습니다ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인