.fadeToggle ([duration] [, easing] [, complete]) 정보
jQuery .fadeToggle ([duration] [, easing] [, complete])본문
.fadeToggle ([duration] [, easing] [, complete])
설명 : 불투명도를 애니메이션으로 표시하여 일치하는 요소를 표시하거나 숨 깁니다.
이 .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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeToggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</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>
<div id="log"></div>
<script>
$( "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>
0
댓글 0개