在圖像點擊後失去不透明度轉換

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'); 
    }); 
});