0

下にスクロールするときにjqueryを使用してサイトのヘッダーにシャドウを追加しました。ただし、クラスを追加するとシャドウを「フェードイン」し、削除するとフェードアウトしたいと思います。

それはCSS3を使用して行うことができますか？

これは、スクロール時に追加/削除されるクラスです。

.header_shadow{-webkit-box-shadow: 0 10px 6px -6px #777;-moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;}

ありがとうございました！

4

2 に答える 2

5

CSSトランジションを使用します（必要に応じてプレフィックスを追加します）。

.header_shadow { 
    box-shadow: 0 0 0 0 #777;
    transition: box-shadow 3s ease-in-out;
}

.header_shadow.addshadow {
    box-shadow: 0 10px 6px -6px #777;
}

これがフィドルです

于 2012-09-05T04:32:35.080 に答える
-1

このようにデモ

$('#box').mouseover(function() {
      $(this).delay(200).animate({
        'boxShadowX': '10px',
        'boxShadowY':'10px',
        'boxShadowBlur': '20px'
    });
});

$('#box').mouseout(function() {
      $(this).delay(200).animate({
        'boxShadowX': '0px',
        'boxShadowY':'0px',
        'boxShadowBlur': '0px'
    });
});

</ p>

于 2012-09-05T04:42:19.423 に答える