0

ボーダーと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; 
}
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 に答える