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/