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

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/

​

Comments

मैं सफारी का उपयोग करता हूं और यह पूरी तरह से तब भी काम करता है जब मैं माउस के साथ ऑब्जेक्ट छोड़ देता हूं ... क्या समस्या है?

— एलेवले 94

नहीं, मेरे लिए काम नहीं करता है! संक्रमण काम करता है जब मैं लाल बॉक्स को मँडराता हूँ! माउस के साथ लाल बॉक्स को छोड़ते समय यह पूरी तरह से "कूद" जाता है - मैं इसे माउस-आउट पर भी एनिमेट करना चाहता हूं!

— मैट

फ़िल्टर का उपयोग क्यों न करें ... caniuse.com/#search=filter

— DevWL

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

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

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

मुझे यकीन है कि ऐसा करने के लिए एक सभी jQquery तरीका है। मैं ऐसा करने वाला आदमी नहीं हूं। :)

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

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

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

Answer 3

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

फिडेल की जाँच करें: http://jsfiddle.net/2k3hfwo0/2/