javascript - 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}​

更新 fiddle :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);    
    });​

fiddle 示例:http://jsfiddle.net/fk6eG/23/