JQuery가 .addClass 및 CSS 전환으로 나타 납니까?

Question

특정 JQuery 효과가 어떻게 구현되었는지 이해하고 싶습니다. this design company's website에 'About Us'및 'The Team'섹션에 도달하면 태블릿 및 인물 사진이 '팝업'으로 표시됩니다. 어떻게 효과를 재현 할 수 있습니까?

페이지에서 jquery 코드를 복사하여 붙여 넣으려고했으나 제대로 작동하지 못했습니다. 누군가 내가 놓친 걸 말해 줄 수 있니?

jQuery('.animated').appear(); 
jQuery(document.body).on('appear', '.slide', function() { 
    jQuery(this).each(function() { 
     jQuery(this).addClass('ae-animation-slide') 
    }); 
}); 

여기 첫째는 더 DOM이 준비가되어 있지 않습니다 보인다 JSFiddle

Answer 1

의 전체 코드입니다. 페이지에서 자바 스크립트 실행 로딩이 완료 될 때까지 기다려야 JQuery와에게 $(document).ready()를 사용

$(document).ready(function() { 
    //put codes in here. 
}) 

나는 당신의 JSFiddle을 시도하지만 내가 다시로 볼 수 JSFiddle를 업데이트 할 경우, 이미지를 표시되지 않는 것 같습니다.

이 업데이트 바이올린

http://jsfiddle.net/RcvWM/3/

을 시도 내가 웹킷 CSS를 추가하고, JQuery와 플러그인을 나타난다로드. 포함 시켰는지 확인하십시오.

.ae-animation-slide { 
    -webkit-animation-name: ae-animation-slide; 
    // etc 
}