0

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; 
}
4

3 回答 3

1

如果你愿意，你也可以使用 CSS3 过渡演示来完成同样的事情

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 过渡w3 链接

于 2012-10-30T09:24:30.823 回答
0

这是你想要的吗？

jsfiddle

我将CSS更改为

.submitButton { 
    padding: 10px; 
    border-bottom: 5px solid #1B5A81; 
    border-top: 0px solid #1B5A81; 
    background-color: #267DAD; 
    color: white; 
    font-weight: bold; 
}​
于 2012-10-30T09:26:16.930 回答
0

我设法找到了问题，我必须在 CSS 中定义边框类型和颜色：

固定的CSS：

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

感谢所有的帮助:)

于 2012-10-30T09:26:58.863 回答