Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is what I think you should be doing (pseudo-JavaScript):</p> <pre><code>function animate_it($thing) { var wind = false; var timer_id = setInterval(function() { // Compute the movement for this step. // Then factor in the wind effect and update the `wind` variable. // Then apply the movement to `$thing`. if(it_is_off_the_page($thing)) clearInterval(timer_id); }, n); } </code></pre> <p>If there is anything in the inner computation that is computed over and over again, precompute it at the <code>animate_it</code> level and let the closure close over it. You would want to play with it a bit to figure out what <code>n</code> should be.</p> <p>Just do the animation by hand so that you're not fighting with jQuery's <code>animate</code> function and stop the animation when you know it is done. This also allows you to include a direction and strength for the wind (so that your animated object could go backwards) pretty much for free.</p> <p>You might want to get the <code>timer_id</code> back to the outside world so that you could stop the whole thing from the outside. In that case, you'd want to fake a pointer with a one element object:</p> <pre><code>function animate_it($thing) { var wind = false; var pointer = { timer_id: null }; pointer.timer_id = setInterval(function() { // Compute the movement for this step. // Then factor in the wind effect and update the `wind` variable. // Then apply the movement to `$thing`. if(it_is_off_the_page($thing)) { clearInterval(pointer.timer_id); pointer.timer_id = null; } }, n); return pointer; } var timer = animate_it($thing); // And then later, to shut it down... if(timer.timer_id) clearInterval(timer.timer_id); </code></pre> <p>You'd probably want a "it is gone" callback on <code>animate_it</code> if you had a lot of animated objects, that would let you keep your external list of timers clean and cruft free.</p> <hr> <p>The problem with trying to do this with <code>animate</code> is that <code>animate</code> computes the number of steps at the beginning and then you can change that. You need a variable number of steps but <code>animate</code> doesn't care (it cares even less than a honey badger).</p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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