.hide () 정보
jQuery .hide ()본문
.hide ()
설명 : 일치하는 요소를 숨 깁니다.
매개 변수 .hide()없이이 메서드는 요소를 숨기는 가장 간단한 방법입니다.
$( ".target" ).hide();
일치하는 요소는 애니메이션없이 즉시 숨겨집니다. 이것은 호출 .css( "display", "none" )과 거의 동일하지만 , 나중에 displayjQuery의 데이터 캐시에 저장되므로 display나중에 초기 값으로 복원 될 수 있습니다. 요소가 display값이 inline있고 숨겨져 표시되면 다시 한 번 표시됩니다 inline.
지속 시간, 일반 객체 또는 "완료"함수가 제공 .hide()되면 애니메이션 메소드가됩니다. 이 .hide()메서드는 일치하는 요소의 폭, 높이 및 불투명도를 동시에 애니메이션합니다. 이러한 속성이 0에 도달하면 displaystyle 속성은 none요소가 더 이상 페이지의 레이아웃에 영향을 미치지 않도록 설정됩니다 .
기간은 밀리 초 단위로 표시됩니다. 값이 높을수록 느린 애니메이션이 아니라 빠른 애니메이션이 표시됩니다. 문자열 'fast'및 'slow'은 각각 지속 시간 200및 600밀리 초 를 나타 내기 위해 제공 될 수 있습니다 .
그 주 .hide()즉시 해고 및 지속 기간 또는 0의 기간이 지정되지 않은 경우 애니메이션 대기열을 우선합니다.
jQuery 1.4.3부터 , easing 함수를 명명하는 선택적 문자열을 사용할 수 있습니다. 이징 함수는 애니메이션 내의 다른 지점에서 애니메이션이 진행되는 속도를 지정합니다. jQuery 라이브러리의 유일한 구현 구현은 기본 호출 swing, 호출 , 일정한 속도로 진행되는 호출 linear이다. 더 많은 easing 함수는 플러그인, 특히 jQuery UI suite를 사용할 때 사용할 수 있습니다 .
제공된 경우 애니메이션이 완료되면 콜백이 시작됩니다. 이는 서로 다른 애니메이션을 차례로 문자열로 연결하는 데 유용 할 수 있습니다. 콜백은 어떤 인수도 보내지 않지만 this애니메이션이 적용되는 DOM 요소로 설정됩니다. 여러 요소가 애니메이션으로 표시되는 경우 콜백은 애니메이션 전체에 대해 한 번이 아니라 일치 된 요소 당 한 번 실행된다는 점에 유의해야합니다.
참고 : 이 방법은 특히 많은 요소에서 사용될 때 성능 문제를 일으킬 수 있습니다. 이러한 문제가 발생하는 경우 성능 테스트 도구를 사용하여이 방법으로 인해 문제가 발생하는지 확인하십시오. 또한이 방법은 표시 값이 다른 뷰포트 크기에서 다를 경우 반응 형 레이아웃에서 문제를 일으킬 수 있습니다.
간단한 이미지와 같은 요소를 애니메이트 할 수 있습니다
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
1
댓글 0개