jQuery边界动画

我正在尝试使用borders和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; 
}

---

如果您愿意，您也可以使用CSS3转换来完成同样的事情

HTML

---

CSS3转换

这是您想要的吗

我将css更改为

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

---

我设法找到了问题，我必须在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;
        }

---

谢谢您的帮助：）

应该可以，您是否在CSS中设置了默认边框值？能否显示您的

#sendForm

样式？或者更好的是，检查并更新这个？谢谢，它不支持IE，所以我现在将坚持使用jQuery:）

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

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