이미지 클릭 후 불투명도 전이 손실

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