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

你不需要javascript来做到这一点，你可以使用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/

编辑：对于一个jQuery的解决方案，你可以使用jQuery UI的switch class方法：

CSS：

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

的Javascript：

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

小提琴：http://jsfiddle.net/fk6eG/23/