Databases
StackOverflow2013
Postsdbo
POjquery stop() all animations without letting deferreds $.when, .promise(), .done() return complete?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery stop() all animations without letting deferreds $.when, .promise(), .done() return complete?
    primarykey
    data
    text
    <p>Seems like every 50-100 jsfiddle updates lead me to the stackoverflow community to help solve a new issue I create! so Thanks!</p> <p>Background: I have several functions containing animations, functions are to be fired after the previous one is completed. With some help and research I started using $.when and .promise() to control this stuff over my initial very ugly callback strings &amp; setTimeouts on each function. </p> <p>My dilemma is this: At some point the user may want to pause everything and resume it again at their leisure. I can't seem to add this functionality!</p> <p>I'm able to pause all animations with $('div:animated').stop() but that is temporary as .promise() still resolves! Any way to override that behavior? Any restructuring that may help make a pause and resume easier to implement?</p> <p>Tomorrow I plan on going down the path of adding all animations to a proxy objects queue but not sure how well creating a global queue on a new object will work with the existing structure. I also intent on looking at adding some boolean to check if value is off then don't call functions or animate otherwise do. I'm not sure if either of those solutions are the appropriate direction I should take?</p> <p>after previewing this post I'd also be inclined to learn how I could refactor my nested start button function! </p> <p>Any direction on implementing pause and resume functionality will be greatly appreciated.</p> <p>The code below is much simplified and each function contains more elements &amp; animations.</p> <p><a href="http://jsfiddle.net/twinturbotom/XEBeg/" rel="nofollow">a fiddle here</a></p> <p>JS:</p> <pre><code> $('#start').click( function() { // run a and wait one second, when done run b and wait 1 second... a().delay(100).promise().done( function(){ b().delay(100).promise().done( function(){ c().delay(100).promise().done( function(){ d().delay(100).promise().done( function(){ e().delay(100).promise().done( function(){ f().delay(100).promise().done( function(){ alert('all done!'); }); }); }); }); }); }); }); $('#reset').click( function() { $('.box').css({ top: '0px' }); }); $('#pause').click( function() { $('div:animated').stop(); }); function a() { return $('.box1').animate({top: '100px'}, 1000, function(){ $('.box1').animate({top: '50px'}, 1000); }); return $('.box6').animate({top: '200px'}, 4000); } function b(){ return $('.box2').animate({top: '100px'}, 1000); } function c(){ return $('.box3').animate({top: '100px'}, 1000, function(){ $('.box3').animate({top: '50px'}, 1000); }); } function d(){ return $('.box4').animate({top: '100px'}, 1000); } function e(){ return $('.box5').animate({top: '100px'}, 1000, function(){ $('.box5').animate({top: '50px'}, 1000); }); } function f(){ return $('.box6').animate({top: '100px'}, 1000); } </code></pre> <p>​ html &amp; CSS</p> <pre><code>&lt;button id='start'&gt;animate&lt;/button&gt; &lt;button id='reset'&gt;Reset&lt;/button&gt; &lt;button id='pause'&gt;pause&lt;/button&gt; &lt;div class='boxes'&gt; &lt;div class='box box1'&gt;&lt;/div&gt; &lt;div class='box box2'&gt;&lt;/div&gt; &lt;div class='box box3'&gt;&lt;/div&gt; &lt;div class='box box4'&gt;&lt;/div&gt; &lt;div class='box box5'&gt;&lt;/div&gt; &lt;div class='box box6'&gt;&lt;/div&gt; &lt;/div&gt;​ .boxes{position: relative} .box{width: 40px; height: 40px; background-color: green; position:absolute;} .box1{left: 0px;} .box2{left: 60px;} .box3{left: 120px;} .box4{left: 180px;} .box5{left: 240px;} .box6{left: 300px;} ​ </code></pre> <p><strong>EDIT</strong> You're answers have provided the learning experience I was looking for; I really appreciate the mind share! My contrived example may not showcase the real world problem enough as the answers posed do not allow multiple animations to fire at the same time? I don't think at least? For example box1 and box2 may move at the same time, or when box3 fires so does box6. The initial VERY UGLY promise system I implemented used many functions as each function was composed of many animations. How would this be achieved with the proposed answers?</p> <p><strong>EDIT2</strong> Two answers, charlietfl's lets me easily add secondary functions that fire simultaneously; very important. Alnitak's has an elegant way of constructing an array and applying it to the animations that is very easy to change animation types (fadeOut(), fadeIn()).</p> <p>So what I'm attempting to do is combine the two such that I can create a nested array for secondary animations that uses Alnitaks array format:</p> <pre><code>['.box1', 'animate', { top: '50px'}, 1000], </code></pre> <p>SO in short i'm still working on all answers but getting close / nearly there with charlietfls's. Adding Alnitak's array to his or adding charlietfl's nesting to Alnitak's.</p> <p>This got more intense then I ever intended; I appreciate your contributions and code to learn from.... Very informative!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStwinturbotom
    1. UStwinturbotom
    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
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    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