jQuery에서 애니메이션을 종료하는 방법-JS 튜토리얼-php.cn

jQuery에서 애니메이션을 종료하는 방법

清浅

풀어 주다： 2019-01-25 11:06:49

원래의

3986명이 탐색했습니다.

stop() 함수를 사용하면 현재 진행 중인 애니메이션을 즉시 중지할 수 있습니다. 이는 이전 애니메이션이 후속 애니메이션의 효과에 영향을 미치는 것을 방지하기 위한 것입니다.

jQuery에서는 중지를 통해 애니메이션을 종료할 수 있습니다. () 방법. 일반적으로 두 애니메이션 사이를 전환하는 데 사용됩니다. 때로는 마우스가 너무 빨리 미끄러지면 애니메이션 효과가 마우스 움직임과 일치하지 않게 되므로 애니메이션을 중지하려면 stop()이 필요합니다. 다음 글에서는 구체적인 예시를 통해 stop 메소드의 사용법을 알려드리겠습니다

jQuery에서 애니메이션을 종료하는 방법

[추천 강좌: jQuery Tutorial] stop() 메소드는 모든 jQuery 효과 함수에 적용 가능합니다. , 슬라이딩, 페이드 인 및 아웃, 사용자 정의 애니메이션 등을 포함합니다.

여기에는 stopAll, goToEnd의 두 가지 매개변수가 있습니다.

stopAll은 애니메이션 대기열을 지워야 하는지 여부를 나타냅니다. 기본값은 false이며, 활성 애니메이션만 중지하고 대기열에 있는 애니메이션이 거꾸로 실행되도록 허용합니다.

goToEnd는 현재 애니메이션을 즉시 완료할지 여부를 나타냅니다. 기본값은 거짓입니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style type="text/css"> 
#stop{
	margin-bottom:10px;
}
#panel,#flip

{   width:200px;
	padding:5px;
	text-align:center;
	background-color:pink;
	border:solid 1px #ccc;
}
#panel
{      
	
	display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">停止动画</div>
</body>
</html>

로그인 후 복사

Rendering:

요약: 위 내용은 이 기사의 전체 내용입니다. pass 이 문서는 애니메이션을 종료하는 방법을 배우는 데 도움이 될 수 있습니다. jQuery에서 애니메이션을 종료하는 방법