フェードイン/アウトCSS3と

Question

可能性の重複：それはthis効果を達成することが可能だ場合、私は骨董品だ
thumbnails fade in fade out

（内のみフェードイン/アウト）

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

Answer 1

はいこれは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トランジションは 'all'プロパティに対して定義され、イージーインイージングイージング関数で1秒のトランジションが与えられているため、プロパティの変更はアニメーション化されます。

また、新しいプロパティであるため、遷移プロパティの前には該当するブラウザーの実装が必要です。 chrome/safari用の-webkit、firefox/mozilla用の-moz、-oオペラ、-ms microsoft。

Answer 2

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/