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 切換類方法：

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/