fade in/out với css3

Question

thể trùng lặp:
thumbnails fade in fade out

Tôi curios nếu nó có thể để đạt được this hiệu lực thi hành (chỉ fade in/out)

với css3. Tôi có một hình thu nhỏ tương tự như cuộn và tôi muốn tạo hiệu ứng đó mà không cần javascript, hoặc nếu điều này là không thể bạn có thể giúp tôi với một giải pháp đơn giản để tạo ra điều này với jquery? Cảm ơn!

Answer 1

Có thể thực hiện điều này bằng chuyển tiếp CSS3.

Dưới đây là một ví dụ: http://jsfiddle.net/fgasU/

mã:

<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}​ 

ví dụ đơn giản này sẽ thay đổi opacity trên di chuột. Bởi vì quá trình chuyển đổi css được định nghĩa cho các thuộc tính 'tất cả' và chúng được đưa ra một chuyển đổi 1 giây với chức năng giảm bớt dễ dàng, thay đổi thuộc tính là hoạt ảnh.

Ngoài ra, vì nó là thuộc tính mới, nên thuộc tính chuyển tiếp phải được thực hiện trước bởi triển khai của cơ quan triển khai áp dụng. -webkit cho chrome/safari, -moz cho firefox/mozilla, -o opera, -ms microsoft.

Answer 2

Giải pháp jQuery: Bao bọc hình thu nhỏ trong div kích hoạt, được đặt hoàn toàn trên hình ảnh. Nhắm mục tiêu để làm mờ các phần tử trong và ngoài.

Để biết giải pháp CSS3, hãy tham khảo câu trả lời của 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); 
    }); 
}); 

Xem fiddle tôi: http://jsfiddle.net/TheNix/Cjmr6/