jQuery 중지 애니메이션
jQuery 애니메이션 중지
jQuery stop() 메소드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다.
stop() 메서드는 슬라이드, 페이드 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능과 함께 작동합니다.
구문:
$(selector).stop(stopAll,goToEnd);
선택적인 stopAll 매개변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며 활성 애니메이션만 중지하고 대기열에 있는 애니메이션이 뒤로 실행되도록 허용합니다.
선택적인 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.
따라서 기본적으로 stop()은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.
다음 예에서는 매개변수 없는 stop() 메서드를 보여줍니다.
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">停止滑动</button> <div id="flip">点击这里,向下滑动面板</div> <div id="panel">Hello world!</div> </body> </html>