CSS: Độ mờ chuyển tiếp khi di chuột ra ngoài?

.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;
    }

Tại sao điều này chỉ tạo hoạt ảnh cho độ mờ khi tôi di chuột vào chứ không phải khi tôi rời đối tượng bằng chuột?

Demo tại đây: http://jsfiddle.net/7uR8z/

Các bác sĩ cho biết thêm:

Bạn chỉ áp dụng chuyển đổi cho lớp :hovergiả chứ không áp dụng cho chính phần tử.

.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;
}

Demo: http://jsfiddle.net/7uR8z/6/

Nếu bạn không muốn quá trình chuyển đổi ảnh hưởng đến mouse-oversự kiện, nhưng chỉ mouse-out, bạn có thể tắt chuyển đổi cho :hovertrạng thái:

.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;
}

Demo: http://jsfiddle.net/7uR8z/3/

Tôi đã quản lý để tìm ra giải pháp bằng cách sử dụng css / jQuery mà tôi cảm thấy thoải mái. Vấn đề ban đầu: Tôi đã buộc phải hiển thị khả năng hiển thị trong khi tạo hoạt ảnh vì tôi có các yếu tố treo bên ngoài khu vực. Làm như vậy, các khối văn bản lớn giờ đây cũng bị treo bên ngoài vùng nội dung trong quá trình hoạt ảnh.

Giải pháp là bắt đầu các phần tử văn bản chính với độ mờ bằng 0 và sử dụng addClassđể chèn và chuyển sang độ mờ bằng 1. Sau đó removeClasskhi được nhấp vào lại.

Tôi chắc rằng có tất cả cách jQquery để làm điều này. Tôi không phải là người làm điều đó. :)

Vì vậy, ở dạng cơ bản nhất ...

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

Cảm ơn sự giúp đỡ của tất cả mọi người.

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

Kiểm tra fiddle: http://jsfiddle.net/2k3hfwo0/2/