সিএসএস: মাউস-আউট-এ রূপান্তর অস্বচ্ছতা?

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ছদ্ম-শ্রেণিতে স্থানান্তর প্রয়োগ করছেন , উপাদানটিতেই নয় to

.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

আমি সিএসএস / জিকুয়েরি ব্যবহার করে এমন একটি সমাধান খুঁজে পেয়েছি যার সাথে আমি আরামদায়ক। আসল ইস্যু: অ্যানিমেট করার সময় আমাকে দৃশ্যমানতা প্রদর্শন করতে বাধ্য করতে হয়েছিল কারণ আমার কাছে এলাকার বাইরে উপাদান রয়েছে hanging এটি করার ফলে, অ্যানিমেশন চলাকালীন এখন পাঠ্যের বড় ব্লকগুলি সামগ্রীর ক্ষেত্রের বাইরেও ঝুলতে থাকে।

সমাধানটি ছিল মূল টেক্সট উপাদানগুলিকে 0 এর অস্বচ্ছতা দিয়ে শুরু করা এবং addClassইনজেক্ট করতে এবং 1 এর अस्पष्टিতে স্থানান্তরিত করতে ব্যবহার করা Then তারপরে 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/