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
css 메소드 사용해서 animate opcaity로 투명도 조정으로 해보세요.
오버이벤트 발생전에 opacity 0처리 발생후 opacity 1로 animate처리
이미지를 레이어로 감싸고 absolute 로 두개의 이미지를 겹쳐서 띄우고
보여주고자 하는 이미지의 z-index값을 높여줍니다.
레이어에 마우스를 오버했을시 위에 있는 이미지를 fadeout, 마우스 아웃시 fadein 해주면 될듯하네요.
그렇게 할까도 했는데 반응형도 걸려있고 display flex를 사용해서 position값 주기가 좀 애매해서요...
그건 알고있지만 저 코드의 어느부분에 위치해야 구동이 되는지 모르겠습니다.
여기저기 넣어봤는데 안돼서요...
https://stackoverflow.com/questions/5979418/jquery-change-image-src-with-fade-effect
이거 참고해보시면 좋을 듯 해요
저 코드와 좀 달라서 어느부분에 페이드인이 들어가야 구동되는지 모르겠네요 ㅠㅠㅠㅠ