jQuery에서 애니메이션을 종료하는 방법
- 清浅원래의
- 2019-01-25 11:06:493958검색
stop() 함수를 사용하면 현재 진행 중인 애니메이션을 즉시 중지할 수 있습니다. 이는 이전 애니메이션이 후속 애니메이션의 효과에 영향을 미치는 것을 방지하기 위한 것입니다.
jQuery에서는 중지를 통해 애니메이션을 종료할 수 있습니다. () 방법. 일반적으로 두 애니메이션 사이를 전환하는 데 사용됩니다. 때로는 마우스가 너무 빨리 미끄러지면 애니메이션 효과가 마우스 움직임과 일치하지 않게 되므로 애니메이션을 중지하려면 stop()이 필요합니다. 다음 글에서는 구체적인 예시를 통해 stop 메소드의 사용법을 알려드리겠습니다
[추천 강좌: 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에서 애니메이션을 종료하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.