버튼을 클릭 할 때 동적으로 변경되는 div에 애니메이션을 적용하는 방법

Question

지정된 언어를 사용하는 프로젝트를 표시하는 포트폴리오의 코드 스 니펫. 반환되는 div는 즉시 변경되지만 변경되면 애니메이션 효과를 원합니다. Heres 내 HTML :

   <div> 
        <button class="waves-effect waves-light btn-large" onclick="checkProjects('python');">Python</button> 
       </div> 
       <div> 
        <button class="waves-effect waves-light btn-large" onclick="checkProjects('javascript');">Javascript</button> 

       </div> 

      <div class="col s6 project-list"> 
       <div class = "project1 col s12"> 
        <div id="project1Title" class="project-title col s12"></div> 
        <img id="project1Pic" class="project-picture col s6" src=""> 
        <div id ="project1Caption" class="col s6"></div> 
       </div> 
       <div class="project2 col s12"> 
        <div id="project2Title" class="project-title col s12"></div> 
        <img id="project2Pic" class="project-picture col s6" src=""> 
        <div id ="project2Caption" class="project-caption col s6"></div> 
       </div> 
      </div> 

애니메이션을 매주 프로젝트 1 ... 프로젝트 2 ... 등으로 변경하고 싶습니다.

Answer 1

내가하려는 일을 성취하기 위해 근본적으로 두 가지 기본적인 방법이 있습니다.

당신도

1. 추가/당신이 원하는 스타일로 전환 할 수있는 클래스를 제거 할 수 있습니다.
2. javascript 또는 jquery를 사용하여 수동으로 애니메이션 효과를 적용합니다.

애니메이션이 더 복잡하고 jquery를 사용하는 것이 가장 좋습니다.

// When the user clicks on a project 
$('.project').on('click',function() { 

    // Animate the project element 
    $(this).animate({ 
    opacity:1 
    },{duration:200,queue:false}) 

    // To access this specific project's child 
    // elements (ie, title, picture, caption) you will 
    // need to use .children 
    $(this).children('.project-title').animate({ 
    opacity:1, 
    top:'50px' 
    },{duration:200,queue:false}) 
}) 

jQuery의 애니메이션 기능이 추가 정보를