web-dev-qa-db-ja.com

css3でフェードイン/フェードアウト

重複の可能性：
サムネイルはフェードインフェードアウト

this 効果（フェードイン/フェードアウトのみ）を達成できれば、私は好奇心旺盛です

css3で。私は同様のサムネイルスクローラーを持っていて、JavaScriptなしでその効果を作成したいのですが、これが不可能な場合は、jqueryでこれを作成するための簡単な解決策を手伝ってもらえますか？ありがとう！

csscss3fade
10
Cojocaru Daniel

はい、これはCSS3トランジションで可能です。

次に例を示します。 http://jsfiddle.net/fgasU/

コード：

<img src="photo.jpg"/>​

img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


img:hover{opacity:0}​

この簡単な例では、ホバー時の不透明度を変更します。 css遷移は「すべて」のプロパティに対して定義されており、イーズインアウトイージング機能を使用して1秒間の遷移が与えられるため、プロパティの変更がアニメーション化されます。

また、これは新しいプロパティであるため、遷移プロパティの前に該当するブラウザの実装を配置する必要があります。 -chrome/safariの場合はwebkit、firefox/mozillaの場合は-moz、-o opera、-msMicrosoft。

21
Vigrond

JQueryソリューション：サムネイルをトリガーdivでラップします。これは、画像の上に絶対的に配置されます。それをターゲットにして、要素をフェードインおよびフェードアウトします。

CSS3ソリューションについては、Vigrondの回答を参照してください。

[〜＃〜] html [〜＃〜]

<div id="wrapper">
    <img src="http://lorempixum.com/600/600" />
    <div id="trigger">
        <div id="thumbnails">
             <img src="http://lorempixum.com/60/60" />
             <img src="http://lorempixum.com/60/60" /> 
             <img src="http://lorempixum.com/60/60" /> 
             <img src="http://lorempixum.com/60/60" /> 
        </div>
    </div>
</div>

[〜＃〜] css [〜＃〜]

#wrapper { position:relative; }

#trigger {
    width:100%;
    height:80px;
    position:absolute;
    left:0;
    bottom:20px; }

#thumbnails {
    width:100%;
    height:80px;
    display:none; }

#thumbnails img {
    margin:10px;
    float:left; }

jQuery

$(document).ready(function(){
    $("#trigger").hover(function () {
       $(this).children("div").fadeTo(200, 1);
    }, function(){
         $(this).children("div").fadeOut(200); 
    });
});

私のフィドルを参照してください： http://jsfiddle.net/TheNix/Cjmr6/

2
Nix