박스 hover시 줌효과를 주고 싶은데 어떻게해야 할까요...ㅜㅜ??

박스 hover시 줌효과를 주고 싶은데 어떻게해야 할까요...ㅜㅜ??

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

박스 hover시 줌효과를 주고 싶은데 어떻게해야 할까요...ㅜㅜ??

본문

안녕하세요 코드를 배운지 이제 막 5개월 된 신입입니다.

 

제가 홈페이지를 경험삼아 하나 만들어 보려하는데....

 

박스 hover시 background이미지를 addClass()를 주어 변경시키는데까지는 성공했는데

여기서 자연스럽게 변경하거나 줌효과를 주면서 이미지를 변경하고 싶습니다.

 

줌에 관련하여 이것저거 찾아보는데 마우스 휠이나 원클릭은 쉽게 찾았지만 

hover를 찾을 수가 없어서요 ....

 

혹시 hover에는 따로 플러그인을 사용해야 하나요 ??

사용해야한다면 어떻게 해야 할까요 ㅠㅠ....?

 

이틀째 혼자 해보려 하는데 도저히 혼자서는 안될것 같아서요 ....

 

부디 좋은 조언 부탁드립니다 !!

 

----------------------------------------------------------------------------------

 

밑에는 제가 짠 제이쿼리 클래스 붙여다가 떼는거입니다...

여기서 추가적으로 뭔가 빨려들어가는 느낌을 원하는데.....

 

너무 부자연스럽네요....ㅠㅠ 

자연스럽게 커지는 방법이나 이럴 경우 줌효과를 어떻게 줘야 하는지....

너무 알고싶습니다 ...ㅠㅠ

 

 

 

function gallery(){
    
    var cnt=0, timer=0, delay=2000;
    var $bglBox=$(".left"), $bgH2=$("#contents > div > h2"), $leftBg=$(".leftBg");
    
     $bglBox.css({ display:"block"})
    $(".leftWrap").hover(function(){
         $bglBox.removeClass("on").css({ display:"block"});
         $bglBox.addClass("on").delay().css({transform:"scale(1.3)", display:"block"}).fadeIn(1000);
        
    },function(){
      $bglBox.removeClass("on").css({transform:"scale(1.0)"}).fadeIn(1000)
    })
     

}

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 3

채택됨

흉내쟁이님의 답변

hover 는 단순히 이벤트일뿐이니 윗분처럼 hover 이벤트를 걸어주시기만 하면 됩니다. jquery 사용버전에 따라 이벤트 거는법이 조금씩 달라지니 사용하시는 버전에 맞추시면 됩니다.

 

참고로 jQuery 애니메이션이 CSS 애니메이션, 트랜지션보다 성능이 떨어지고 버벅입니다. 그래서 CSS 트랜지션, 애니메이션을 지원하는 브라우저에서는 CSS로 구현하고 해당 기능을 지원하지 않는 구형 브라우저들에서 꼭 필요한 기능이라고 생각될때만 jQuery등의 애니메이션으로 대체합니다.

 

또한, jQuery 같은 스크립트로 애니메이션을 구현할 생각이면 그것보다 애니메이션 성능이 좋은 다른 라이브러리들이 있습니다. velocity.js나 vue.js 같은 것들이 더 좋은 성능을 발휘합니다.  

주소복사
채택됨
답변의 댓글

엔바이츠님의 답변

jquery의 fadein과 fadeout 기능을 써보는 건 어떨까요?^^

 

$(".leftWrap").hover(function(){
$bglBox.fadeIn( "slow", function() {

// Animation complete


});
});
주소복사
답변의 댓글

트샷님의 답변

scale 줌 효과를 css 에서 주고,

jquery 에서의 줌 효과는 빼는 방법이 효과가 있을수도 있습니다.

 

.leftBG:hover {

scale : (1.3)

}

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 65,636 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT