फीका/बाहर css3 साथ

Question

संभव डुप्लिकेट:
thumbnails fade in fade out

मैं कलाकृतियां हूँ अगर यह this प्रभाव को प्राप्त करना संभव है (केवल इन/आउट फीका)

सीएसएस 3 के साथ। मेरे पास एक समान थंबनेल स्क्रोलर है और मैं जावास्क्रिप्ट के बिना उस प्रभाव को बनाना चाहता हूं, या यदि यह संभव नहीं है तो क्या आप इसे 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}​ 

यह सरल उदाहरण हॉवर पर अस्पष्टता बदल जाएगा। चूंकि एक सीएसएस संक्रमण 'सभी' गुणों के लिए परिभाषित किया गया है, और उन्हें आसानी से बाहर निकलने वाले फ़ंक्शन के साथ 1 सेकंड संक्रमण दिया जाता है, संपत्ति परिवर्तन एनिमेटेड होता है।

इसके अलावा, क्योंकि यह एक नई संपत्ति है, संक्रमण संपत्ति लागू ब्रोवर के कार्यान्वयन से पहले होनी चाहिए। क्रोम/सफारी के लिए वेबबिट, फ़ायरफ़ॉक्स/मोज़िला, -ओ ओपेरा, -एम माइक्रोसॉफ्ट के लिए।

Answer 2

jQuery समाधान: ट्रिगर div में थंबनेल लपेटें, जो पूरी तरह से छवि पर स्थित है। तत्वों को अंदर और बाहर फीका करने का लक्ष्य रखें।

CSS3 समाधान के लिए, Vigrond के उत्तर का संदर्भ लें।

एचटीएमएल

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

सीएसएस

#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/