DIV & Animation

Question

DIVs으로 메뉴를 만들고이를 JS으로 움직이면 메뉴의 모든 버튼에 대해 동일한 JS 및 CSS 코드를 복사/붙여 넣는 것을 발견했습니다. 애니메이션 JS 코드와 CSS 스타일 코드를 한 번 생성하고 내 웹 사이트에있는 버튼에 필요할 때 호출 할 수 있습니까?

Answer 1

애니메이션을 함수로 가져 와서 모듈화 한 다음 특정 클래스의 모든 버튼 (또는 기타)에 적용합니다. http://jsfiddle.net/agconti/9299P/

HTML

<button class="my-btn-class"></button> 

CSS :

.my-btn-class { 
    /* no stylings just a target*/ 
} 

JS : 바이올린에

이

예 :이처럼

function myAnimation(btn) { 
    //do stuff to btn 
    $(btn).animate({ 
     opacity: 0.25, 
     left: "+=50", 
     height: "toggle" 
    }, 5000, function() { 
     // Animation complete. 
    }); 
} 
    $(function() { 
     $(document).on("click", ".my-btn-class", function (e) { 
      e.preventDefault(); 
      myAnimation(this); 
     }); 
    }); 

당신은 당신의 JS 애니메이션을 붙여 넣을 수 있습니다 myAnimation 기능을 사용하십시오. 그 방법으로 모든 버튼은 클래스 my-btn-class과 동일한 애니메이션을 클릭하면됩니다. 사이트를 통해 계속 재사용 할 수있는 코드를 모듈화하는 것이 좋습니다. 모든 코드가 한 번에 있기 때문에 코드를 쉽게 유지 관리 할 수 ​​있습니다.