답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p>$(document).ready(function() {
var changeImg = "교체할 이미지";
var originImg = "";
$(이미지).hover(function() {
var $this = $(this);
originImg = $this.attr('src');
$this.stop().animate({
opacity: 0
}, 500, function() {
$this.attr('src', changeImg).stop().animate({
opacity: 1
}, 500)
})
}, function() {
var $this = $(this);
$this.stop().animate({
opacity: 0,
}, 500, function() {
$this.attr('src', originImg).stop().animate({
opacity: 1
}, 500);
originImg = '';
})
});
});</p>
<p>https://codepen.io/moon-chai-jung-arkiad/pen/RwJYdjV
로그인 후 평가할 수 있습니다
답변에 대한 댓글 7개
�
망공
2년 전
이방식은 마우스오버시 사진이 오퍼시티값으로 하얗게 돼고 다음 보여질 이미지가 페이드인 됍니다 제가 찾던 방식은 하얗게 돼지않고 바로 다음 이미지로 전환돼는 방법 이였습니다 답변 주셔서 감사합니다
�
아르키어드
2년 전
그렇다면 그냥 교체할 이미지를 보여지는 이미지위에 index값을 높여서 띄워놓고 해당 이미지의 부모에 over됐을때 페이드인 해주시거나,
아니면 이미지를 css에 백그라운드이미지와 트랜지션 주시고 호버했을때 백그라운드이미지를 교체해주는게 가장 쉬운방법입니다. 다만 css로 작업하게 되면 seo에서 약간 문제되는게 있긴합니다.
아니면 이미지를 css에 백그라운드이미지와 트랜지션 주시고 호버했을때 백그라운드이미지를 교체해주는게 가장 쉬운방법입니다. 다만 css로 작업하게 되면 seo에서 약간 문제되는게 있긴합니다.
�
망공
2년 전
제가 이미지를 가져오는 방식이 sql로 뽑아오는 방식이라 어쩔수없이 jquery를 사용해야하는대 방법이 있을까요?
�
아르키어드
2년 전
그러시면 이미지위에 앱솔루트로 빈 엘리먼트 하나 띄워놓고 display none 시켜놓고, sql로 뽑아온 이미지 주소를 img태그를 자바스크립트로 생성해서 fadeIn해주는 방법도 있겠네요
�
망공
2년 전
오오.. 솔루션 감사합니다 !
�
아르키어드
2년 전
https://codepen.io/moon-chai-jung-arkiad/pen/RwJYdjV
images2 에 걸린 이벤트 확인해주세요
images2 에 걸린 이벤트 확인해주세요
�
망공
2년 전
선생님이 말씀해주신대로 2번째 사진을 가져와서 absolute로 뒤에 깔아놓고 z-index로 1번 사진을 메인으로 새운다음에 1번사진만 불투명도를 조절하니까 원하는그림이 나오내요 ㅎㅎ 감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인