1

テキストが透けて見えるように半透明になるスティッキーCSSメニューを作成しようとしています。ユーザーがメニューにカーソルを合わせたときに不透明にするために を追加しました:hover {opacity:1;}が、これはかなりの「コース」変更です。最初に透明になるときと不透明に戻るときの両方で、これらのトランジションをアニメーション化できれば素晴らしいことです。

私がそれを機能させた方法はfixed、ウィンドウの位置がヘッダー div の高さを超えているときに、jquery を使用して body タグにクラスを追加することです。ここで実際の動作を見ることができます。

ホバートランジションはcss3アニメーションだと思いますが、今のところうまくいきません。クラスを追加することによって引き起こされる最初の遷移 - どこから始めればよいかさえわかりません!

どんな助けでも大歓迎です。

ソリューション CSS3 ソリューションは、以下の回答から取得および変更されています。トランジション効果を から に移動し.fixed header navましたheader nav。fixedこれにより、クラスが追加または削除されたときにアニメーションが機能します。ここで更新されたソリューション: Fiddle

4

3 に答える 3

1

CSS:

body.fixed nav{
    position:fixed;
    top:0px;
    opacity:0.6;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    width:100%;
}
body.fixed nav:hover{
    opacity:1;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
}

フィドル: http://jsfiddle.net/sTCqq/1/

于 2013-04-23T21:46:53.690 に答える
0

.hover()これを行うには、jQueryと.animate()メソッドを組み合わせることができます。

$('header').hover(function(){
   $(this).animate({
    opacity: 1 }, 1000);
}, function(){
    $(this).animate({
    opacity: 0.6 }, 1000);
});

Jsfiddle の例

于 2013-04-23T21:51:26.343 に答える