jquery stop() 메소드의 용도는 무엇입니까?
- 青灯夜游원래의
- 2022-03-01 18:32:382851검색
jquery에서 stop() 메서드는 선택한 요소에 대해 현재 실행 중인 애니메이션 효과를 중지하는 데 사용됩니다. 구문은 "$(selector).stop(stopAll,goToEnd)"입니다. stopAll 및 goToEnd 매개변수는 선택적 매개변수입니다. 값은 모두 Boolean이고, 기본값은 모두 false입니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.
jquery에서는 stop() 메서드를 사용하여 선택한 요소에 대해 현재 실행 중인 애니메이션 효과를 중지합니다.
구문:
$(selector).stop(stopAll,goToEnd)
stopAll 및 goToEnd는 선택적 매개변수이며 해당 값은 부울 값이고 기본값은 false입니다. stopAll은 대기열 애니메이션을 중지하는 것을 의미합니다. 값이 false이면 현재 애니메이션만 중지되고, 값이 true이면 현재 애니메이션과 모든 후속 대기열 애니메이션이 중지됩니다. goToEnd는 애니메이션을 현재 애니메이션 효과의 최종 상태로 점프하는 것을 의미합니다.
그 중 stop() 메소드에는 표 1과 같이 4가지 형태가 있습니다.
| 형식 | 설명 |
|---|---|
| stop() | 은 현재 애니메이션과 후속 애니메이션만 중지하는 stop(false, false)과 동일합니다. 또한 |
| stop(true) | 을 계속 실행할 수 있습니다. 이는 stop(true, false)과 동일하며 현재 애니메이션을 중지하고 후속 애니메이션을 중지합니다. |
| stop(true, true) | The 현재 애니메이션은 계속 실행되고 다음 애니메이션만 중지 |
| stop(false, true) | 현재 애니메이션을 중지하고 마지막 애니메이션으로 점프하고 마지막 애니메이션을 실행합니다 |
일반적으로 우리는 다음 애니메이션만 사용합니다. 실제 개발중 중지() 메소드의 첫 번째 매개변수, 두 번째 매개변수는 거의 사용되지 않습니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
$(function () {
$("#btn-start").click(function () {
$("div").animate({ "width": "200px" }, 2000)
.animate({ "background-color": "red" }, 2000)
.animate({ "height": "200px" }, 2000)
.animate({ "background-color": "blue" }, 2000);
});
$("#btn-stop").click(function () {
$("div").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="开始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div></div>
</body>
</html>미리보기 효과는 아래 그림과 같습니다.
이 예에서는 animate() 메서드를 사용하여 4개의 애니메이션을 정의합니다. [Start] 버튼을 클릭한 후, 잠시 후 다시 [Stop] 버튼을 클릭하면 현재 실행 중인 애니메이션을 즉시 중지(즉, 현재 animate() 메서드 중지)한 후 다음 애니메이션으로 점프합니다. (즉, 다음 animate() 메서드).
[중지] 버튼을 다시 클릭하면 다음 애니메이션 등으로 이동합니다. 친구들은 스스로 테스트하여 느낄 수 있습니다.
모든 대기열 애니메이션을 중지하려면 stop() 메서드의 첫 번째 매개변수를 true로 정의하면 됩니다. 코드는 다음과 같습니다.
$("#btn-stop").click(function () {
$("div").stop(true);
})예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").hover(function () {
$(this).animate({ "height": "150px" }, 500);
}, function () {
$(this).animate({ "height": "50px" }, 500); //移出时返回原状态
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>미리보기 효과는 아래 그림.
이 예제에서는 hover() 메서드를 사용하여 마우스 포인터가 안팎으로 움직일 때 애니메이션 효과를 정의합니다. 요소를 빠르게 안팎으로 이동할 때 매우 이상한 버그를 발견하게 됩니다. 요소가 계속 길어지거나 짧아지는 것입니다! 즉, 애니메이션은 계속 실행되며 전혀 중지할 수 없습니다.
이러한 "멈출 수 없는" 버그는 실제 개발에서 자주 발생하므로 친구들은 특별한 주의를 기울여야 합니다. 실제로 이 버그는 애니메이션 누적으로 인해 발생합니다. jQuery에서는 애니메이션이 완료되지 않으면 "애니메이션 대기열"에 추가됩니다. 이 예제에서는 요소가 들어오거나 나갈 때마다 애니메이션이 생성됩니다. 애니메이션이 완료되지 않은 경우 애니메이션 대기열에 추가되고, 완료되지 않은 애니메이션이 계속 생성됩니다. 모든 애니메이션이 완료될 때까지 실행됩니다.
이 버그는 요소 이동에 따라 생성된 애니메이션이 실행되기 전에 stop() 메서드만 추가하면 쉽게 해결할 수 있습니다. 최종 수정된 코드는 다음과 같습니다.
$("div").hover(function () {
$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
$(this).stop().animate({ "height": "50px" }, 500); //移出时返回原状态
})애니메이션 누적으로 인해 발생하는 이 버그의 경우 is(":animated")를 사용하여 현재 애니메이션 상태를 확인하고 해결할 수도 있습니다. is(":animated") 메소드에 대해서는 나중에 자세히 소개하겠습니다.
실제로 jQuery에는 animation-finish()를 중단하는 방법도 있습니다. 이 메서드는 대기 중인 애니메이션을 지우고 현재 애니메이션을 최종 값으로 점프시킨다는 점에서 stop(true,true) 메서드와 유사하게 작동합니다. 그러나 stop(true,true)와 달리 대기 중인 모든 애니메이션이 최종 값으로 이동합니다. finish() 메소드는 많이 사용되지 않으므로 간단히 살펴보겠습니다.
【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 개발 동영상】
위 내용은 jquery stop() 메소드의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!