1 line
3.6 KiB
JSON
1 line
3.6 KiB
JSON
{"name":"finish","type":"method","title":".finish()","deprecated":null,"removed":null,"desc":"Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.","categories":["effects/custom-effects","version/1.9"],"entries":[{"return":"jQuery","signatures":{"added":"1.9","argument":{"desc":"The name of the queue in which to stop animations.","name":"queue","type":"String","optional":"true"}},"examples":{"desc":"Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.","code":"\nvar horiz = $( \"#path\" ).width() - 20,\n vert = $( \"#path\" ).height() - 20;\n\nvar btns = {\n bstt: function() {\n $( \"div.box\" ).stop( true, true );\n },\n bs: function() {\n $( \"div.box\" ).stop();\n },\n bsft: function() {\n $( \"div.box\" ).stop( false, true );\n },\n bf: function() {\n $( \"div.box\" ).finish();\n },\n bcf: function() {\n $( \"div.box\" ).clearQueue().finish();\n },\n bsff: function() {\n $( \"div.box\" ).stop( false, false );\n },\n bstf: function() {\n $( \"div.box\" ).stop( true, false );\n },\n bcs: function() {\n $( \"div.box\" ).clearQueue().stop();\n }\n};\n\n$( \"button.b\" ).on( \"click\", function() {\n btns[ this.id ]();\n});\n\n$( \"#go\" ).on( \"click\", function() {\n $( \".box\" )\n .clearQueue()\n .stop()\n .css({\n left: 10,\n top: 10\n })\n .animate({\n top: vert\n }, 3000 )\n .animate({\n left: horiz\n }, 3000 )\n .animate({\n top: 10\n }, 3000 );\n});\n","html":"\n<div class=\"box\"></div>\n<div id=\"path\">\n <button id=\"go\">Go</button>\n <br>\n <button id=\"bstt\" class=\"b\">.stop( true,true )</button>\n <button id=\"bcf\" class=\"b\">.clearQueue().finish()</button>\n <br>\n <button id=\"bstf\" class=\"b\">.stop( true, false )</button>\n <button id=\"bcs\" class=\"b\">.clearQueue().stop()</button>\n <br>\n <button id=\"bsff\" class=\"b\">.stop( false, false )</button>\n <button id=\"bs\" class=\"b\">.stop()</button>\n <br>\n <button id=\"bsft\" class=\"b\">.stop( false, true )</button>\n <br>\n <button id=\"bf\" class=\"b\">.finish()</button>\n</div>\n","css":"\n .box {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 15px;\n height: 15px;\n background: black;\n }\n #path {\n height: 244px;\n font-size: 70%;\n border-left: 2px dashed red;\n border-bottom: 2px dashed green;\n border-right: 2px dashed blue;\n }\n button {\n width: 12em;\n display: block;\n text-align: left;\n margin: 0 auto;\n }\n"},"longdesc":"\n <p>When <code>.finish()</code> is called on an element, the currently-running animation and all queued animations (if any) immediately stop and their CSS properties set to their target values. All queued animations are removed.</p>\n <p>If the first argument is provided, only the animations in the queue represented by that string will be stopped.</p>\n <p>The <code>.finish()</code> method is similar to <code>.stop(true, true)</code> in that it clears the queue and the current animation jumps to its end value. It differs, however, in that <code>.finish()</code> also causes the CSS property of all <em>queued</em> animations to jump to their end values, as well.</p>\n <div class=\"warning\">\n <p>Animations may be stopped globally by setting the property <code>$.fx.off</code> to <code>true</code>. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.</p>\n </div>\n "}]} |