Потеря перехода непрозрачности после щелчка изображения

Question

Я использую переход непрозрачности css для наведения мыши, но всякий раз, когда вы нажимаете на изображение, затем выходите за пределы изображения (чтобы вернуть образы jQuery), переход css больше не работает.

моего CSS переход

.grid li a:hover img { 
    -webkit-transition: opacity .2s ease-in; 
    -moz-transition: opactiy .2s ease-in; 
    -ms-transition: opacity .2s ease-in; 
    -o-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 
    opacity: 1; 
    } 

.grid:hover li { 
    -webkit-transition: opacity .2s ease-in; 
    -moz-transition: opactiy .2s ease-in; 
    -ms-transition: opacity .2s ease-in; 
    -o-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 0.3; 
    } 

Вместо размещения сильного удара нагрузки код, который я думал, что jsfiddle будет лучше.

JSFIDDLE

Answer 1

Это потому, что внутренние стили подменяют стили CSS. Вы можете удалить атрибут стиля, как только закончите с анимацией, и убедитесь, что он не переопределяет стили CSS. http://jsfiddle.net/azizpunjani/Djby5/1/

$('#hidden').click(function() { 
    $grid_li = $('.grid li'); 
    $grid_li.find('img').animate({ width: '339px', height: '211px' }); 
    $grid_li.siblings().fadeIn(); 
    $grid_li.siblings().animate({opacity: 1, top:'0px'}, 1000, function(){ 
     $(this).removeAttr('style'); 
    }); 
});