2

ホバー状態の間でアニメーション化できますか?

例えば：

#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;

したがって、下の境界線は 0 から 25px まで上がります。

これが CSS で可能かどうか、または jQuery を使用する必要があるかどうかはわかりません。

4

4 に答える 4

9

CSS3 トランジションを使用できますが、現時点ではサポートがそれほど充実していません。

#メニューウルリーア{
    -webkit-transition: ボーダー .5s イーズインアウト;
    -moz-transition: ボーダー .5s イーズインアウト;
    -o-transition: ボーダー .5s イーズインアウト;
    トランジション: ボーダー .5s イーズインアウト。
}

構文は次のとおりです。element time easing

ここにフィドルがあります

于 2012-09-25T10:24:54.703 に答える
2

はい、CSS トランジションを追加するだけです。

の#menu ul li a {

追加するだけです：

-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;

ちなみに、ms は必要ありません。IE10 はプレフィックスを使用しません。

詳細については、http://css3.bradshawenterprises.com/をご覧ください。

于 2012-09-25T10:25:59.617 に答える
0

CSS3 トランジションは次のように機能します。

#menu ul li a {
    display:block;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 5px;
    padding: 0 10px;
    -webkit-transition: border-bottom-width 0.5s ease-in-out;
    -moz-transition: border-bottom-width 0.5s ease-in-out;
    -o-transition: border-bottom-width 0.5s ease-in-out;
    transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;
}
于 2012-09-25T10:29:16.317 に答える
0

jQuery UIを使用して CSS クラス間でアニメーションを実行できます

$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );

また、css プロパティをアニメーション化するためにも使用できます。

$( "#effect" ).animate({
    backgroundColor: "#aa0000",
    color: "#fff",
    width: 500
}, 1000 );

これは、現在の背景色、色、および幅から、指定したものにアニメーション化されます。

于 2012-09-25T10:25:08.527 に答える