>  기사  >  웹 프론트엔드  >  JQuery_jquery를 기반으로 한 슬라이딩 및 애니메이션 소개

JQuery_jquery를 기반으로 한 슬라이딩 및 애니메이션 소개

WBOY
WBOY원래의
2016-05-16 17:36:171105검색

jQuery 슬라이딩 방법: 요소에 슬라이딩 효과를 만들 수 있습니다.
slideDown()은 요소를 아래로 슬라이드합니다.
slideUp()은 요소를 위로 슬라이드합니다.
slideToggle()은 SlideDown()과 SlideUp() 메서드 사이를 전환합니다.

$(selector).slide(speed,callback);
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 슬라이딩이 완료된 후 실행될 함수의 이름입니다.

jQuery 애니메이션 - jQuery animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.
구문:
$(selector).animate({params},speed,callback);
필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.
기본적으로 모든 HTML 요소의 위치는 고정되어 이동할 수 없습니다. 위치를 조작하려면 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정해야 합니다.
jQuery animate() - 여러 속성을 조작하는 기능
컬러 애니메이션을 생성해야 하는 경우 jQuery에서 컬러 애니메이션 플러그인을 다운로드해야 합니다. com.com.
jQuery animate() - 상대값 사용 ​​
상대값을 정의할 수도 있습니다(값은 요소의 현재 값을 기준으로 함). 값 앞에 = 또는 -=를 추가해야 합니다.

jQuery animate() - 사전 정의된 값 사용
속성 값에 애니메이션을 적용하여 "표시", "숨기기" 또는 "전환"할 수도 있습니다:
$("버튼"). click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - 큐 기능 사용
기본적으로 jQuery는 애니메이션에 대한 큐 기능을 제공합니다.
이는 여러 animate() 호출을 차례로 작성하면 jQuery가 해당 메서드 호출을 포함하는 "내부" 대기열을 생성한다는 의미입니다. 그런 다음 이러한 애니메이션 호출을 하나씩 실행합니다.

ex1,ex2

jQuery stop() 메서드

jQuery stop() 메서드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다.

stop() 메소드는 슬라이드, 페이드, 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능과 함께 작동합니다.

$(selector).stop(stopAll,goToEnd);

선택적인 stopAll 매개변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며 활성 애니메이션만 중지하고 대기 중인 애니메이션이 뒤로 실행되도록 허용합니다.

선택적인 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.

따라서 기본적으로 stop()은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.