Databases
StackOverflow2013
Postsdbo
POjquery animate - stop animate finishing if another animate begins
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery animate - stop animate finishing if another animate begins
    primarykey
    data
    text
    <p>Can anyone help me understand the animate better.</p> <p>I'm wondering if it is possible to stop an current animate position whilst running. Then from another animate function, carry it on from the current position to the new one.</p> <p>It's really hard trying to explain this so I've created a <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow noreferrer">fiddle</a>...</p> <p><br /></p> <p><strong>The <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow noreferrer">Fiddle</a></strong></p> <p><a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow noreferrer">http://jsfiddle.net/motocomdigital/L5uh4/9/</a></p> <p>In the fiddle, you will see a tweet. If you simply roll over the tweet it will animate a left positioning, bringing the whole tweet into view.</p> <p>But the if you roll off the tweet, it animates back to beginning.</p> <p><em>Note: The animation will not run if the tweet is shorter than the visible twitter area. If this happens, reduce the fiddle window down to roughly the size below and re-run the <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow noreferrer">fiddle</a>.</em></p> <p><img src="https://i.stack.imgur.com/rHveo.png" alt="enter image description here"></p> <p><br /></p> <p><strong>My Problem</strong></p> <p>If I hover on and off the tweet like 10 times in a row. It wants to run the all 10 animate alternations one after the other, in a queue.</p> <p>I don't want this to happen, I need it so if I hover ON the tweet - the animation begins, but if I hover OFF (before the animation is complete), I would like it pause at it's current location and animate to the hover OFF position. And not stack a queue. But also can this work vice versa?</p> <p>Is there a simple method to this? Thanks</p> <p><br /></p> <p><strong>See My Code</strong></p> <pre><code>$("#tweet").tweet({ username: ["seaofclouds", "laughingsquid"], count: 1, template: "{text}", avatar_size: 32 }).bind("loaded", function(){ var visible = $('#tweet ul').width(), spanTweet = $('span.tweet_text').width(); if ( spanTweet &gt; visible ) { $('#tweet ul').hover(function() { $('#tweet ul li').animate({ left : '-' + ( spanTweet - visible ) + 'px' }, 3000 ); }, function() { $('#tweet ul li').animate({ left : '0px' }, 3000 ); }); } }); </code></pre> <p><br /></p> <p>Thanks in advance for any help on this :)</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. USJoshc
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery animate - stop animate finishing if another animate begins
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjquery animate - stop animate finishing if another animate begins
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjquery animate - stop animate finishing if another animate begins
      1. USbharal
      1. VTFavorite
    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