JQuery에서 중지 메소드 사용
- 巴扎黑원래의
- 2017-06-30 11:33:391600검색
프런트 엔드 페이지 개발에서는 때로는 멋진 효과가 필요할 때가 있습니다. 이때 JQuery에서 애니메이션을 사용하면 매우 간단합니다.
최근 직장에서 페이지 요소 이동 효과를 발견했습니다. 이것은 간단한 페이지 효과이며 구현하기가 매우 쉽습니다.
사용 중에는 애니메이션을 중지하기 위해 "stop()" 메서드를 사용합니다. 이전에는 이 메서드만 사용하고 크게 신경 쓰지 않았습니다.
요 며칠간 또 우연히 발견해서 문서를 열어서 테스트를 해보니 실제로 새로운 인사이트를 얻었습니다. 나는 이 방법에 대해 새로운 이해를 갖게 되었으며 여기에 테스트를 기록합니다.
JQuery 문서에 이 메소드에 대한 설명은 다음과 같습니다.
1. 개요
지정된 요소에서 실행 중인 모든 애니메이션을 중지합니다.
큐에 실행 대기 중인 애니메이션이 있는 경우(clearQueue가 true로 설정되지 않은 경우) 즉시 실행됩니다.
2. 매개변수 없음
장면 시뮬레이션
배경에서 이동했다가 시작 위치로 돌아가야 하는 요소가 있다고 가정해 보세요. 페이지에는 "이동 시작", "정지 방법을 사용하여 복귀", "정지 방법을 사용하지 않고 복귀"를 담당하는 세 개의 버튼이 있습니다.
전체 페이지 렌더링은 다음과 같습니다.
테스트 코드 및 효과
1 <script type="text/javascript"> 2 3 $(function () { 4 //向右移动600px 5 $("#Button1").click(function () { 6 $("#move").stop().animate({ left: 610 }, 3000);
7 }); 8 //立即往回移动（有stop） 9 $("#Button2").click(function () {10 $("#move").stop().animate({ left: 10 }, 3000);
11 });12 //移动完600px，才会往回移动（没有stop）13 $("#Button3").click(function () {14 $("#move").animate({ left: 10 }, 3000);15 });16 17 });18 </script>
코드 보기
를 통해 알아내는 것은 어렵지 않습니다. 테스트
정지점이 있으면 파란색으로 표시됩니다. 색칠된 사각형이 오른쪽으로 이동할 때 버튼을 클릭하면 사각형이 즉시 돌아옵니다(왼쪽으로 이동).
파란색 사각형이 오른쪽으로 이동할 때 버튼을 클릭하면 사각형은 지정된 위치로 완전히 이동할 때까지 기다렸다가 뒤로 이동합니다(왼쪽으로 이동).
테스트 요약
stop()은 현재 실행 중인 애니메이션을 중지하고 후속 애니메이션이 즉시 실행되도록 합니다.
3. 두 개의 매개변수 또는 하나의 매개변수
문서를 보면 현재 매개변수가 [clearQueue], [gotoEnd]이고 모두 선택 사항이며 유형은 Boolean이라는 것을 알 수 있습니다.
clearQueue: true로 설정하면 대기열을 지웁니다. 애니메이션을 즉시 종료할 수 있습니다.
gotoEnd: 현재 실행 중인 애니메이션을 즉시 완료하도록 하고, 표시 및 숨기기의 원래 스타일을 재설정하고, 콜백 함수를 호출하는 등의 작업을 수행합니다.
하나씩 테스트해 볼 수 있습니다. 코드는 다음과 같습니다.
1 <style type="text/css"> 2 table, tr, th, td { 3 margin: 0px; 4 padding: 5px; 5 border-collapse: collapse; 6 border: 1px solid black; 7 } 8 9 .bg {10 background-color: #8FBC8F;11 border: 1px solid black;12 width: 1000px;13 height: 200px;14 margin: 10px;15 position: relative;16 }17 18 .line {19 position: absolute;20 background-color: #3b9feb;21 }22 23 #linetop {24 top: 10px;25 left: 10px; /*width:980px;*/26 height: 5px;27 }28 </style>29 <script type="text/javascript">30 31 $(function () {32 // 33 34 var line;35 36 $("#start").click(function () {37 line = $("#linetop").animate({ width: 980 }, 3000)38 .animate({ height: 180 }, 3000);39 });40 41 42 $("#stop").click(function () {43 $("#linetop").stop();44 });45 46 $("#stop_true").click(function () {47 $("#linetop").stop(true);48 });49 50 $("#stop_false").click(function () {51 $("#linetop").stop(false);52 });53 54 55 $("#stop_true_true").click(function () {56 $("#linetop").stop(true, true);57 });58 59 $("#stop_true_false").click(function () {60 $("#linetop").stop(true, false);61 });62 63 $("#stop_false_true").click(function () {64 $("#linetop").stop(false, true);65 });66 67 $("#stop_false_false").click(function () {68 $("#linetop").stop(false, false);69 });70 71 });72 </script>
코드 보기
1 <body><input type="button" id="start" value="动作开始" /> 2 <table> 3 <tr> 4 <th>方法</th> 5 <th>参数</th> 6 <th>说明</th> 7 <th>方法</th> 8 <th>参数</th> 9 <th>说明</th>10 </tr>11 <tr>12 <td>13 <input type="button" id="stop" value="stop()" /></td>14 <td></td>15 <td colspan="4">清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。16 等同于：<span style="color:#ff6a00; font-weight:bold;">stop(false,false)</span>17 </td>18 </tr>19 <tr>20 <td>21 <input type="button" id="stop_true" value="stop(true)" /></td>22 <td>[clearQueue]</td>23 <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>24 <td>25 <input type="button" id="stop_false" value="stop(false)" /></td>26 <td>[clearQueue]</td>27 <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>28 </tr>29 <tr>30 <td>31 <input type="button" id="stop_true_true" value="stop(true,true)" />32 </td>33 <td>[clearQueue],[gotoEnd]</td>34 <td>清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会不再执行。</td>35 <td>36 <input type="button" id="stop_false_true" value="stop(false,true)" />37 </td>38 <td>[clearQueue],[gotoEnd]</td>39 <td>不清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会立即执行。</td>40 </tr>41 <tr>42 <td><input type="button" id="stop_true_false" value="stop(true,false)" /></td>43 <td>[clearQueue],[gotoEnd]</td>44 <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>45 <td><input type="button" id="stop_false_false" value="stop(false,false)" /></td>46 <td>[clearQueue],[gotoEnd]</td>47 <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>48 </tr> 49 50 </table> 51 <p class="bg" id="p1">52 <p class="line" id="linetop"></p>53 </p>54 </body>
코드 보기
다음 결과 정리를 참조하세요
| Method | Parameters | Description | Method | Parameters | Description |
|---|---|---|---|---|---|
| 큐 및 현재 실행 중인 작업 지우기 중지 즉시. 후속 작업은 더 이상 실행되지 않습니다. stop(false,false) | |||||
| [clearQueue] | 큐를 지우면 현재 실행 작업이 즉시 중지됩니다. 후속 작업은 더 이상 실행되지 않습니다. | [clearQueue] | 은 대기열을 지우지 않으며 현재 실행 작업이 즉시 중지됩니다. 후속 작업은 즉시 수행됩니다. | ||
| [clearQueue],[gotoEnd] | 큐를 지우면 현재 실행 중인 작업이 즉시 완료됩니다. 후속 작업은 더 이상 실행되지 않습니다. | [clearQueue],[gotoEnd] | 는 대기열을 지우지 않으며 현재 실행된 작업은 즉시 완료됩니다. 후속 작업은 즉시 수행됩니다. | ||
| [clearQueue],[gotoEnd] | 큐를 지우면 현재 실행 작업이 즉시 중지됩니다. 후속 작업은 더 이상 실행되지 않습니다. | [clearQueue],[gotoEnd] | 는 대기열을 지우지 않으며 현재 실행 작업이 즉시 중지됩니다. 후속 조치는 즉시 수행됩니다. | ||
4. Notes
jQuery 이후 버전에서는 stop의 또 다른 사용법이 있는데, 이는 queue와 함께 사용됩니다. 이 사용법에 대해 나는 아직 속성이 아니며 여기서는 좋은 설명을 제공할 수 없습니다.
앞으로 천천히 공부하도록 맡겨주세요.
현재 stop의 사용법은 우리에게 충분하다고 생각합니다.
위 내용은 JQuery에서 중지 메소드 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!