CODEWITHSUNDEEP
jquerycss
user747588
user747588

Reputation:

jQuery Border Animation

I'm trying to animate a button click by using borders and jQuery animate function.

jQuery( '#sendForm' ).hover( function (){
    jQuery( this ).animate({
        borderTopWidth: "5px",
        borderBottomWidth: "0px"
    }, 'fast' );
}, function (){
    jQuery( this ).animate({
        borderTopWidth: "0px",
        borderBottomWidth: "5px"
    }, 'fast' );
});

From some reason it doesn't animate the top border only the bottom.

Update

.submitButton { 
    padding: 10px; 
    border: 0px; 
    border-bottom: 5px solid #1B5A81; 
    background-color: #267DAD; 
    color: white; 
    font-weight: bold; 
}

Upvotes: 0

Views: 694

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157414

If you want you can also accomplish the same thing using CSS3 transition Demo

HTML

<button>BlahBlah</button>

CSS

    button {
   border-top: 5px solid #ff0000;
   border-bottom: 0px solid #ff0000;
   transition: border-top 2s, border-bottom 2s;
   -moz-transition: border-top 2s, border-bottom 2s; /* Firefox 4 */
   -webkit-transition: border-top 2s, border-bottom 2s;; /* Safari and Chrome */
   -o-transition: border-top 2s, border-bottom 2s; /* Opera */
}

button:hover {
   border-top: 0px solid #ff0000;
   border-bottom: 5px solid #ff0000;
   transition: border-top 2s, border-bottom 2s;
   -moz-transition: border-top 2s, border-bottom 2s; /* Firefox 4 */
   -webkit-transition: border-top 2s, border-bottom 2s;; /* Safari and Chrome */
   -o-transition: border-top 2s, border-bottom 2s; /* Opera */
}

CSS3 transitions w3 link

Upvotes: 1

user747588
user747588

Reputation:

I've managed to find the problem, i had to define border type and color in the CSS:

Fixed CSS:

.submitButton
        {
            padding: 10px;
            border: 0px;
            border-top: 0px solid white;
            border-bottom: 5px solid #1B5A81;
            background-color: #267DAD;
            color: white;
            font-weight: bold;
        }

Thanks for all the help :)

Upvotes: 0

Jacob George
Jacob George

Reputation: 2627

Is this how you want it?

jsfiddle

I changed the css to

.submitButton { 
    padding: 10px; 
    border-bottom: 5px solid #1B5A81; 
    border-top: 0px solid #1B5A81; 
    background-color: #267DAD; 
    color: white; 
    font-weight: bold; 
}​

Upvotes: 0

Related Questions