테스트 사이트 - 개발 중인 베타 버전입니다

hover시 이미지가 바뀌는 코드에 fadein 추가하는 법 있을까요

Mihamiya 2년 전 조회 2,493

현재 이렇게 해서 

이미지를 hover하면 이미지가 바뀌게 되어있습니다.

여기에 fadein / fadeout 효과를 줄수 있을까요?

아는 선에서 이것저것 해봤는데 안되네요 ㅠㅠ

 

$(function() {      $(".con7_1 .imgP img").hover(function(){          $(this).attr("src", $(this).attr("src").replace(".jpg", "_1.jpg"));     }, function(){          $(this).attr("src", $(this).attr("src").replace("_1.jpg", ".jpg"));      });  });

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

2년 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
Mihamiya
2년 전
저 코드와 좀 달라서 어느부분에 페이드인이 들어가야 구동되는지 모르겠네요 ㅠㅠㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

제이쿼리면 

.fadeIn();

.fadeOut();

함수가 있습니다.

https://www.codingfactory.net/10299

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
Mihamiya
2년 전
그건 알고있지만 저 코드의 어느부분에 위치해야 구동이 되는지 모르겠습니다.
여기저기 넣어봤는데 안돼서요...

댓글을 작성하려면 로그인이 필요합니다.

F
2년 전

이미지를 레이어로 감싸고 absolute 로 두개의 이미지를 겹쳐서 띄우고

보여주고자 하는 이미지의 z-index값을 높여줍니다. 

레이어에 마우스를 오버했을시 위에 있는 이미지를 fadeout, 마우스 아웃시 fadein 해주면 될듯하네요. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
Mihamiya
2년 전
그렇게 할까도 했는데 반응형도 걸려있고 display flex를 사용해서 position값 주기가 좀 애매해서요...

댓글을 작성하려면 로그인이 필요합니다.

핑크빈
2년 전

css 메소드 사용해서 animate opcaity로 투명도 조정으로 해보세요.

오버이벤트 발생전에  opacity 0처리 발생후 opacity 1로 animate처리

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인