jQuery Gradual Sink Effect Button

Question

There are two ways to do this the way I see it without flash.

When you move your mouse over the image; it gradually changes to the hover class. Or when when you hover over the image, the margins change each side going either horizontal either way.

The first way would be better but it is CSS at the end of the day. I want this button to gradually sink when you hover over it - and you move your mouse off, it bounces back:

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

You don't need javascript to do this, you can use CSS transitions:

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

Updated fiddle: http://jsfiddle.net/fk6eG/15/

Edit: For a jquery solution, you could use the jquery UI switch class method:

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);    
    });​

Sample fiddle: http://jsfiddle.net/fk6eG/23/