요소 표시, 숨기기, 전환 및 Sliding_jquery를 제어하는 jQuery 메서드 요약
- WBOY원래의
- 2016-05-16 16:03:371684검색
jQuery 숨기기 및 표시
Hide()와 show()라는 두 가지 함수를 통해 jQuery는 HTML 요소 숨기기 및 표시를 지원합니다.
예시
코드 복사 코드는 다음과 같습니다.
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() 및 show() 모두 속도와 콜백이라는 두 가지 선택적 매개변수를 설정할 수 있습니다.
구문:
코드 복사 코드는 다음과 같습니다.
$(selector).hide(속도,콜백)
$(selector).show(속도,콜백)
speed 매개변수는 표시하거나 숨길 속도를 지정합니다. "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
콜백 매개변수는 숨기기 또는 표시 기능이 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
예시
코드 복사 코드는 다음과 같습니다.
$("버튼").click(function(){
$("p").hide(1000);
});
콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
jQuery 슬라이딩 기능 - SlideDown, SlideUp, SlideToggle
jQuery에는 다음과 같은 슬라이딩 기능이 있습니다.
코드 복사 코드는 다음과 같습니다.
$(selector).slideDown(속도,콜백)
$(selector).slideUp(속도,콜백)
$(selector).slideToggle(속도,콜백)
속도 매개변수는 "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
SlideDown() 인스턴스
코드 복사 코드는 다음과 같습니다.
$(".flip").click(function(){
$(".panel").slideDown();
});
jQuery 페이드 함수 - fadeIn(), fadeOut(), fadeTo()
jQuery에는 다음과 같은 페이드 기능이 있습니다.
코드 복사 코드는 다음과 같습니다.
$(selector).fadeIn(속도,콜백)
$(selector).fadeOut(속도,콜백)
$(selector).fadeTo(speed,opacity,callback)
속도 매개변수는 "느림", "빠름", "보통" 또는 밀리초 값을 설정할 수 있습니다.
fadeTo() 함수의 불투명도 매개변수는 지정된 불투명도에 대한 페이드를 지정합니다.
콜백 매개변수는 이 함수가 완료된 후 실행될 함수의 이름입니다. 이 튜토리얼의 뒷부분에서 콜백 매개변수에 대해 자세히 알아볼 것입니다.
jQuery 사용자 정의 애니메이션
jQuery 함수를 사용하여 사용자 정의 애니메이션을 생성하기 위한 구문:
코드 복사 코드는 다음과 같습니다.
$(selector).animate({params},[기간],[easing],[콜백])
주요 매개변수는 params입니다. 애니메이션을 적용하는 CSS 속성을 정의합니다. 이러한 속성은 여러 개 동시에 설정할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
두 번째 매개변수는 기간입니다. 애니메이션에 적용하는 데 사용되는 시간을 정의합니다. 설정되는 값은 "느림", "빠름", "보통" 또는 밀리초입니다.
예시
코드 복사 코드는 다음과 같습니다.