jQuery 점진적인 싱크 효과 버튼

Question

플래시없이 볼 수있는 방법은 두 가지가 있습니다.

이미지 위로 마우스를 움직일 때; 점차 호버 클래스로 변경됩니다. 또는 이미지 위로 마우스를 가져 가면 여백이 각면을 어느 방향 으로든 수평으로 바꿉니다.

첫 번째 방법은 더 나을 것이지만 CSS는 끝날 때입니다. 당신이 그것을 위에 마우스를 올려 때 점차적으로 침몰이 버튼을 원하는 - 당신이 당신의 마우스를 이동, 그것은 다시 반사 :

HTML을

<center><br /><br /> 
<a href="#"><img src="//gc-cdn.com/button.png" alt=""></a> 
</center> 

에게 CSS는

img{border-right:15px solid #333;border-bottom:15px solid #333} 
img:hover{border-right:1px solid #333;border-bottom:1px solid #333} 

jsFiddle

http://jsfiddle.net/fk6eG/9/을

Answer 1

자바 스크립트를 사용하지 않아도됩니다. CSS 전환 :

img{ 
    border-right:15px solid #333; 
    border-bottom:15px solid #333; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
img:hover{border-right:1px solid #333;border-bottom:1px solid #333}​ 

업데이트 바이올린 : http://jsfiddle.net/fk6eG/15/

편집 :

CSS :

.c1{border-right:15px solid #333;border-bottom:15px solid #333;} 
.c2{border-right:1px solid #333;border-bottom:1px solid #333}​ 

자바 스크립트 : JQuery와 솔루션 들어, JQuery와 UI를 switch class 방법을 사용할 수 있습니다

$(".c1").hover(function() { 
     $(this).switchClass("c1", "c2", 1000);   
    }, function() { 
     $(this).switchClass("c2", "c1", 1000);  
    });​ 

샘플 바이올린 : http://jsfiddle.net/fk6eG/23/