Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung der Stop-Methode der JQuery-Animation animate_jquery

Detaillierte Erläuterung der Verwendung der Stop-Methode der JQuery-Animation animate_jquery

WBOY
WBOYOriginal
2016-05-16 16:49:111301Durchsuche

animate-Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector).animate (Stile, Geschwindigkeit, Erleichterung, Rückruf)

Code kopieren Der Code lautet wie folgt:


Testing< /title> <br> <link rel="stylesheet" href="css/reset.css"></script> <style> <br>position: relative; <br>width: 300px; div { <br>Position: absolut; <br>Höhe: 50px <br>Hintergrund: #FA0; ;/style> <br></head> <br><body><input type="button" id="btn1" value="Aktuelle Animation stoppen"< type="button" id="btn2" value="Alle Animationen stoppen"><input type="button" id="btn3" value="Alle Animationen stoppen, das Ende erreichen"> ><div class=" wrap"> <br><div></div> <br><script> ('.wrap div') .animate({'left':'250px'},1000).animate({'left':'0px'},1000); <br><br>$('#btn1 ').click(function(){ <br>$('.wrap div').stop(); // Stoppen Sie die aktuelle Animation und kehren Sie unterwegs zum Startpunkt zurück. Wenn Sie Klicken Sie während des Rückkehrvorgangs erneut, es wird auf dem Weg angehalten <br> clearInterval( <br>}) <br><br>$('#btn2').click(function(){ <br>$( '.wrap div').stop(true); // Alles stoppen Durch Klicken zum Stoppen während der Animation wird direkt der Endpunkt erreicht. Wenn Sie während des Rückkehrvorgangs erneut klicken, wird unterwegs angehalten <br>}) <br><br>$('#btn3').click(function(){ <br>$('.wrap div').stop(true,true); // Alle Animationen stoppen. Wenn Sie während der auf Stop klicken Wenn Sie während des Rückkehrvorgangs erneut klicken, wird am Startpunkt angehalten <br> }) <br><br>// .stop() // Aktuelle Animation stoppen <br>// .stop(true) // Alle Animationen stoppen <br>// .stop(true,true) // Alle Animationen stoppen, das Ende der Animation erreichen <br></script> /body> <br></html> <br><br>.stop(); // Stoppen Sie die aktuelle Animation während des Rückkehrvorgangs wird unterwegs anhalten. <br><br>.stop(true); // Wenn Sie während der Fahrt auf Stopp klicken, gelangen Sie direkt zum Endpunkt wird auf dem Weg pausieren <br><br>.stop(true,true); // Wenn Sie während der Fahrt auf „Stopp“ klicken, wird der Endpunkt direkt erreicht der Ausgangspunkt.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="Js Jquery erstellt eine Popup-Ebene, die page_javascript-Fähigkeiten laden kann" href="https://m.php.cn/de/faq/13074.html">Js Jquery erstellt eine Popup-Ebene, die page_javascript-Fähigkeiten laden kann</a></span><span>Nächster Artikel:<a class="dBlack" title="Js Jquery erstellt eine Popup-Ebene, die page_javascript-Fähigkeiten laden kann" href="https://m.php.cn/de/faq/13076.html">Js Jquery erstellt eine Popup-Ebene, die page_javascript-Fähigkeiten laden kann</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>