jquery에서 stop() 사용

Purpose: stop()의 사용법을 이해하기 위해 예를 들어 직관적으로 살펴보겠습니다.

실제 객체: id="animater"인 p에는 텍스트 조각이 포함되어 있습니다. (다음은 애니메이터를 사용하여 실제 개체를 나타냅니다.)

애니메이션의 최종 완성 효과: animater가 오른쪽으로 800px를 이동한 후(이 전체 프로세스는 애니메이션 1입니다) 글꼴이 점차적으로 이동합니다. 점점 커지다가(이 전체 과정은 애니메이션 2) 투명도가 점차 0으로 감소하고(이 전체 과정은 애니메이션 3) 투명도가 점차 1로 돌아가고(이 전체 과정은 애니메이션 4) 글꼴 크기가 왼쪽 테두리 200px 위치에서 16px 이동합니다(이 전체 과정은 애니메이션 5입니다).

HTML 코드:

       <p id="animater">
            stop()方法测试        </p>

        <p id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </p>

CSS 코드:

         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;                /*为了移动，需设置此属性*/
                position: relative;
            }

j쿼리 코드:

              //            为了看效果，随意写的动画
                $('#animater').animate({                    'right':-800
                }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');        
                //           点击不同的button执行不同的操作        
                $('#button1').click(function(){                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });

W3School에는 다음 설명이 있습니다.

stop(stopAll

,

goToEnd
)

ParametersDescription

stopAll

예 선택하세요. 선택한 요소의 대기 중인 모든 애니메이션을 중지할지 여부를 지정합니다. 이 매개변수는 stopAll 매개변수가 설정된 경우에만 사용할 수 있습니다.

goToEnd	선택사항. 현재 애니메이션을 완료할 수 있는지 여부를 지정합니다.
내 이해: stopAll이 false인 경우 대기열에 추가된 선택한 요소의 모든 애니메이션이 중지되지 않고 현재 애니메이션만 중지됩니다. stopAll이 true인 경우 대기열에 추가된 모든 애니메이션을 중지합니다(goToend가 true인 경우 현재 애니메이션의 최종 효과로 직접 이동합니다). goToend가 false인 경우 현재 애니메이션의 최종 효과로 직접 이동할 수 없습니다(소위 현재 애니메이션의 완성이어야 합니다). , 현재 애니메이션의 완성으로 바로 이동할 수 있습니다. 애니메이션의 최종 종료 효과 페이지를 실행할 때마다 애니메이터가 움직일 때마다 다른 버튼을 클릭하면 다음과 같은 다양한 효과를 볼 수 있습니다. (애니메이터가 애니메이션 1에 있을 때 클릭): 두 매개변수가 모두 false이므로 버튼 버튼1(stop( ))을 클릭합니다. 그래서 클릭이 발생하면 애니메이터는 현재 애니메이션(애니메이션 1)의 최종 효과로 점프하지 않고 직접 애니메이션 2에 들어간 다음 전체 애니메이션이 완료될 때까지 애니메이션 3, 4, 5에 들어갑니다. 버튼 1번(stop(true))을 클릭하세요. 첫 번째가 true이고 두 번째가 false이므로 애니메이터가 모두 즉시 중지되고 애니메이션이 이동을 멈춥니다. 클릭 버튼 버튼1(stop(false,true)) 첫 번째는 false이고 두 번째는 true이므로 클릭이 발생하면 애니메이터의 현재 애니메이션(애니메이션 1)이 중지되고 애니메이터가 바로 해당 애니메이션으로 점프합니다. 현재 애니메이션(애니메이션 1) 최종 효과 위치를 지정하고 전체 애니메이션이 완료될 때까지 다음 애니메이션(애니메이션 2, 3, 4, 5)을 정상적으로 실행합니다. 버튼 버튼1(stop(true, true))을 클릭합니다. 둘 다 true이므로 클릭이 발생하면 애니메이터가 현재 애니메이션(애니메이션 1)의 최종 효과 위치로 점프한 다음 모든 애니메이션이 중지됩니다. 직장에서 겪은 실제 사례: 프로젝트에 드롭다운 메뉴를 만들었습니다. 마우스를 위로 올리면 메뉴가 표시되고, 마우스를 떼면 메뉴가 표시됩니다. Hidden 메뉴 안팎으로 마우스를 빠르고 지속적으로 이동하면(즉, 메뉴 드롭다운 애니메이션이 완료되지 않은 경우 마우스가 메뉴 밖으로 이동하는 경우) "애니메이션 축적"이 발생합니다. 마우스 이동이 멈추면 누적된 애니메이션은 애니메이션 시퀀스 실행이 완료될 때까지 계속 실행됩니다. 해결책: 애니메이션 효과 코드를 작성하기 전에 stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置） 을 추가하세요.

위 내용은 jquery에서 stop() 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!