सीएसएस: माउस-आउट पर अस्पष्टता संक्रमण?

Question

.item:hover { 
     zoom: 1; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     -webkit-transition: opacity .15s ease-in-out; 
     -moz-transition: opacity .15s ease-in-out; 
     -ms-transition: opacity .15s ease-in-out; 
     -o-transition: opacity .15s ease-in-out; 
     transition: opacity .15s ease-in-out; 
    } 

क्यों यह केवल अस्पष्टता चेतन करता है जब मैं होवर में लेकिन जब मैं माउस के साथ वस्तु नहीं छोड़?

यहाँ डेमो: http://jsfiddle.net/7uR8z/

Answer 1

आप तत्व में ही करने के लिए केवल :hover छद्म वर्ग के लिए संक्रमण लागू कर रहे हैं, और नहीं।

.item { 
    height:200px; 
    width:200px; 
    background:red; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.item:hover { 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

डेमो: http://jsfiddle.net/7uR8z/6/

आप संक्रमण mouse-over घटना को प्रभावित करने के लिए, लेकिन केवल mouse-out, आप बदलाव :hover राज्य के लिए बंद कर सकते हैं नहीं करना चाहते हैं:

.item:hover { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

डेमो : http://jsfiddle.net/7uR8z/3/

Answer 2

तरह से मैं फ़ायर्फ़ॉक्स unt में इस के साथ Strugglin गया था द्वारा

इल मैं महसूस किया आप शब्द अस्पष्टता लिखने में कोई गलती है:

-moz-transition: opacity .15s ease-in-out; 

Answer 3

मैं एक समाधान सीएसएस/jQuery है कि मैं कर रहा हूँ के साथ सहज का उपयोग कर खोज करने में कामयाब

-moz-transition: opactiy .15s ease-in-out; 

की जरूरत किया जाना है। मूल मुद्दा: मुझे एनिमेट करते समय दृश्यता को दिखाया जाना था क्योंकि मेरे पास क्षेत्र के बाहर लटकने वाले तत्व हैं। ऐसा करने से, एनीमेशन के दौरान सामग्री क्षेत्र के बाहर अब टेक्स्ट के बड़े ब्लॉक भी लटका दिए गए हैं।

समाधान 0 की अस्पष्टता के साथ मुख्य पाठ तत्वों को शुरू करना था और 0 की एक अस्पष्टता में इंजेक्शन और संक्रमण के लिए addClass का उपयोग करना था। फिर removeClass फिर से क्लिक किया गया।

मैं वहाँ एक सब jQquery तरीका यह है यकीन है। मैं बस ऐसा करने वाला लड़का नहीं हूं। :)

तो में यह सबसे बुनियादी रूप है ...

.slideDown().addClass("load"); 
.slideUp().removeClass("load"); 

हर किसी को मदद के लिए धन्यवाद।

Answer 4

$(window).scroll(function() {  
    $('.logo_container, .slogan').css({ 
     "opacity" : ".1", 
     "transition" : "opacity .8s ease-in-out" 
    }); 
}); 

चेक बेला: http://jsfiddle.net/2k3hfwo0/2/