Databases
StackOverflow2013
Postsdbo
POjQuery -- stop animation within plugin using public methods of that plugin
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery -- stop animation within plugin using public methods of that plugin
    primarykey
    data
    text
    <p>I'm using the <a href="https://github.com/zenorocha/jquery-boilerplate/wiki/Extending-jQuery-Boilerplate" rel="nofollow">extended jQuery Plugin Boilerplate</a> to write a plugin that has public methods to start/stop an animation running within the plugin; this animation is not a CSS amin BTW, it's just a counter so I can fire another method with the function on each <code>step</code>.</p> <p>The animation starts from within the <code>init()</code> method:</p> <pre><code>Plugin.prototype = { init: function () { // Place initialization logic here // You already have access to the DOM element and // the options via the instance, e.g. this.element // and this.options // you can add more functions like the one below and // call them like so: this.yourOtherFunction(this.element, this.options). console.log('init'); $({ i: 0 }).animate({ i: 1000 }, { duration: 1000 , step: function () { console.log(this.i); } }); }, stop: function () { //yourOtherFunction: function () { // some logic console.log('stop'); $(this.element).clearQueue(); $(this.element).stop(); } }; </code></pre> <p>And does start just fine, when called like <code>$('.some-elements').wheels();</code>.</p> <p>I would like a way to pause or stop this animation by calling a public function, for example:</p> <pre><code>var timeout = window.setTimeout(function () { $('#total.cont-email-wheel').wheels('stop'); }, 500); </code></pre> <p>This example would stop the animation around half way through (I understand the inaccuracies of timeouts etc.), but it doesn't; which is why I'm here!</p> <p><em>NB: <code>stop</code> is logged to the console around the halfway mark, so the method is being called properly.</em></p> <p>I'm pretty sure, by looking at the <a href="http://api.jquery.com/clearQueue/" rel="nofollow">jQuery docs</a> that I need to be calling <code>clearQueue()</code> and <code>stop()</code> on the object being animated, which in this case is an anonymous object (<code>{ i }</code>), not the element(s) but I've no clue how to do this.</p> <p>Any help would be much appreciated; I've tried to explain as concisely as possible but if it's not clear I'll try to clarify in the comments!</p> <p>Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJonathon Oates
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery -- stop animation within plugin using public methods of that plugin
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload