CSS 'scale'이 jQuery 'fadeIn'을 깨고 있습니다.

Question

메뉴 버튼을 클릭 할 때 전체 너비의 투명한 오버레이가 내용 위에 희미 해집니다. 내 문제는 콘텐츠를 축소 (축소)하는 CSS 변형 배율 효과를 추가했고 배율이 오버레이 페이드를 깨는 것입니다.

$('.menu').click(function(){ 
    if(!$('.menu').hasClass('active')){ 
     $('.menu').addClass('active'); 

     $('.overlay-bg').fadeIn(); 

     $('.content').addClass('zoom'); 
     $('.content').addClass('blur'); 
    }else{ 
     $('.menu').removeClass('active'); 

     $('.overlay-bg').fadeOut(); 

     $('.content').removeClass('zoom'); 
     $('.content').removeClass('blur'); 
    } 
}); 

관련 CSS는 다음과 같습니다

.content{ 
    background-color: #fff; 
    margin: 0 auto; 
    width: 100%; 
    transition: all 1s ease; 
    -webkit-transition: all 0.5s ease; 
} 

.zoom{ 
    transform: scale(0.8); 
    -webkit-transform: scale(0.8); 
} 

http://jsfiddle.net/forxs/NAZ7D/1/

크롬 (아직 FF 나 IE에 설정되지 않은)

Safari에서 제대로 작동하려면 나타납니다,하지만

스케일을 추가 한 후 오버레이가 더 이상 페이드 인하지 않고 애니메이션 시간이 끝난 후에 표시됩니다.

혼동스럽게도 fadeOut은 정상적으로 작동합니다.

Answer 1

Updated Fiddle

변경은 jQuery를가로 :

$('.menu').click(function() { 
    if (!$('.menu').hasClass('active')) { 
     $('.menu').addClass('active'); 


     setTimeout(function() { 

      $('.content').addClass('zoom blur'); 

     }, 50); 

     $('.overlay-bg').fadeIn(); 
    } else { 
     $('.menu').removeClass('active'); 

     $('.overlay-bg').fadeOut(); 

     $('.content').removeClass('zoom blur'); 
    } 
}); 

여기서 중요한 부분이이 올바르게 렌더링 주문 크롬을 강제로 보이는 timeout-의 초기 전환을 포장한다.