(js) jQuery - animate

카테고리 없음

코딩하는logcat 2023. 2. 27. 17:43

웹페이지를 만들다가 버튼을 누르면 객체가 사라지거나, 생기는 등의 에니메이션을 구현해야 했다,

css .button:focus + . 로 에니메이션을 만들 수도 있지만 focus상태의 한계로 원하는 결과자 나오지 않았다.

jQuery에서는 .animate() 메소드를 이용하여 사용자 정의한 이펙트 효과를 정의할 수 있다.

.animate() 메소드는 여러 CSS 스타일 속성을 이용하여 새로운 이펙트 효과를 만들어 준다.

.animate() 메소드의 원형은 다음과 같다.

$(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]);

스타일은 css 코드라고 생각하면 되고 color을 제외한 거의 모든 css 테그를 사용할 수 있다.

지속 시간은 m/s 기준으로 작성한다.

아니면 fast(400m/s) 또는slow(600m/s)로도 작성 가능하다

시간당 속도는

이고 기본값은 swing이다.

콜벡함수부분에 function(animate())를 달아서 연속적인 에니메이션을 구현할 수도 있다.

$('.option1').animate({opacity : '0', left : "0"},1000);

다음은 .option1 클레스의 객체가 1초동안 투명도가 0으로 변하고 오른쪽으로 이동하는 코드이다.

$("div").animate({
        width: "toggle",
        height: "toggle",
    }, 1000);

위의 코드는 해당 코드가 실행될때마다 크기가 줄면서 사라지고, 커지면서 생기는 효과가 교대로 일어난다.

이처럼 css값인 toggle, show, hide 도 사용 가능하다