jQuery 边框动画

Question

我正在尝试使用边框和 jQuery 动画功能为按钮点击设置动画。

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

出于某种原因，它不会仅对底部边框设置动画。

更新

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

Answer 1

如果您愿意，也可以使用 CSS3 过渡来完成同样的事情 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 过渡 w3 link