.fadeToggle ([duration] [, easing] [, complete])

수다왕

· 8년 전 · 조회 1740 1740

설명 : 불투명도를 애니메이션으로 표시하여 일치하는 요소를 표시하거나 숨 깁니다.

이 .fadeToggle()메서드는 일치하는 요소의 불투명도를 애니메이션으로 나타냅니다. visible 요소에서 호출되면 요소의 displaystyle 속성은 none불투명도가 0이되도록 설정되므로 요소가 더 이상 페이지의 레이아웃에 영향을 미치지 않습니다.

기간은 밀리 초 단위로 표시됩니다. 값이 높을수록 느린 애니메이션이 아니라 빠른 애니메이션이 표시됩니다. 문자열 'fast'및 'slow'은 각각 지속 시간 200및 600밀리 초 를 나타 내기 위해 제공 될 수 있습니다 .

완화

이징 함수를 나타내는 문자열은 애니메이션 내의 다른 지점에서 애니메이션이 진행되는 속도를 지정합니다. jQuery 라이브러리의 유일한 구현 구현은 기본 호출 swing, 호출 , 일정한 속도로 진행되는 호출 linear이다. 더 많은 easing 함수는 플러그인, 특히 jQuery UI suite를 사용할 때 사용할 수 있습니다 .

콜백 함수

제공된 경우 애니메이션이 완료되면 콜백이 시작됩니다. 이는 서로 다른 애니메이션을 차례로 문자열로 연결하는 데 유용 할 수 있습니다. 콜백은 어떤 인수도 보내지 않지만 this애니메이션이 적용되는 DOM 요소로 설정됩니다. 여러 요소가 애니메이션으로 표시되는 경우 콜백은 애니메이션 전체에 대해 한 번이 아니라 일치 된 요소 당 한 번 실행된다는 점에 유의해야합니다.

jQuery를 1.6로서 상기 .promise()방법은과 함께 사용될 수있는 deferred.done()경우에 전체 애니메이션 단일 콜백을 실행하는 방법 의 모든 매칭 요소가 애니메이션을 완료 (투시 .promise 예를 () ).

추가 참고 사항 :

를 포함한 모든 jQuery 효과 .fadeToggle()는 설정 jQuery.fx.off = true을 통해 전역 적으로 해제 할 수 있습니다.이 효과는 기간을 0으로 설정합니다 . 자세한 내용은 jQuery.fx.off를 참조하십시오 .

예:

첫 번째 단락을 앞뒤로 페이드 아웃하고 600 밀리 초 이내에 애니메이션을 완성하고 선형 이징을 사용합니다. 마지막 단락을 200 밀리 초 동안 페이드 인 또는 페이즈 아웃하고 완료시 "완료된"메시지를 삽입합니다.

<!doctype html>

<head>

<title>fadeToggle demo</title>

</head>

<body>

<button>fadeToggle p1</button>

<button>fadeToggle p2</button>

<p>This paragraph has a slow, linear fade.</p>

<p>This paragraph has a fast animation.</p>

$( "button:first" ).click(function() {

$( "p:first" ).fadeToggle( "slow", "linear" );

});

$( "button:last" ).click(function() {

$( "p:last" ).fadeToggle( "fast", function() {

$( "#log" ).append( "<div>finished</div>" );

});

</script>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5366	기타	간단한 전자입찰 전략 계산기 [3]	nekoieye 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1125
5365	PHP	if문으로 비교할게 여러개일때 (feat array_filter) [1]	레오가 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	782
5364	JavaScript	document.querySelector 의 상수화 [2]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	532
5363	JavaScript	로또데이터 자바스크립트 기본함수 [7]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1002
5362		로또 최신회차 추출하기 [16]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1236
5361	JavaScript	당첨확률 높은 로또번호 추출하기 [24]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1246
5360		순수 CSS로 아코디언 메뉴 구현하기	그누보드이해하기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	779
5359		직관적인 컬러 찾기 ~ (컬러피커) [3]	울러리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1094
5358		자바스크립트 응용배열 [10]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1099
5357		PHP 웹 스크래퍼 만들기 : guzzle + dom-crawler [1]	누리컴즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	815
5356		토글, 페이지 새로고침 전 상태 유지. (브라우저 쿠키 활용)	울러리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	369
5355		가벼운 랜더링 클래스 [1]	BupKuuBro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	591
5354		유튜브 반응형 강제쇼츠 동영상 [14]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1063
5353		열기 닫기 아코디언(?) 토글(?) 형식 배너 만들기 [4]	바트컨트롤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	710
5352		브라우저 줄였을때 브라우저의 가로스크롤 가운데로 이동시키기 [3]	바트컨트롤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	645
5351	PHP	메일 사진 첨부하는 방법 [2]	론지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	813
5350	PHP	파일업로드시 이미지 파일 특정 크기로 미리 줄여서 업로드 하기	식냥이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	580
5349	OS	오래된 파일 지우기	누리컴즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	651
5348	기타	링크 단축기	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	456
5347	기타	파일클립(용량무제한 파일첨부관리 클라우드) 그누보드 플러그인을 써보실분 찾습니다. [7]	파일키위 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	638
5346	기타	[7월 개강반 무료 5분 선착순 모집]AWS 클라우드 활용 풀스택 개발자 모집	필수시리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	510
5345	기타	[7월 개강반 무료 5분 선착순 모집]인공지능,AI 핀테크 서비스 개발자 모집	필수시리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	402
5344	JavaScript	마우스 아웃시 레이어창이 안닫혀요	까망고양이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	436
5343	PHP	버튼 오버시 레이어창 1개는 되는데 2개부터 작동안함	까망고양이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	506
5342	jQuery	카카오 우편번호 jquery로 변환	dbxo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	579
5341	PHP	계좌번호 복사소스 [1]	WebProduct 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	884
5340	Mobile	br 태그 모바일에만 보여주기	슈퍼스타맨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	566
5339	기타	불량단어 말고 태그 제한 코드 쎄게 박아넣기	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	563
5338		카페24서버 php7 에서 mssql 연결 안될때 활용법 [3]	멀티트리플 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1304
5337	기타	유튜브 스크립트, 비메오 [7]	슈퍼스타맨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1796