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

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

QA

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

본문

현재 이렇게 해서 

이미지를 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

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

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

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

제이쿼리면 

.fadeIn();

.fadeOut();

함수가 있습니다.

https://www.codingfactory.net/10299

https://stackoverflow.com/questions/5979418/jquery-change-image-src-with-fade-effect
이거 참고해보시면 좋을 듯 해요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT