Databases
StackOverflow2013
Postsdbo
POMy jQuery animation works, but I want to improve it further
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy jQuery animation works, but I want to improve it further
    primarykey
    data
    text
    <p>This is my animation experiment, it works mostly as I expect. However, I want to animation happen one by one. That means the div with id1 does the animation first, then div with id2...etc. I use a for loop to do the trick but the animation happens just too fast. Could anyone let me know how I can make the animation happen one by one instead of animating all the divs almost simultaneously. Thanks in advance for any kind helpers.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;jQuery Animation - jsFiddle demo by dennisboys&lt;/title&gt; &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt; &lt;style type='text/css'&gt; .items { float: left; margin-right: 3px; height: 50px; width: 50px; background-color: lightblue; } &lt;/style&gt; &lt;script type='text/javascript'&gt;//&lt;![CDATA[ $(window).load(function(){ /* Javascript logics: 1. One click on each div can generate a full animation. - using a for loop to do the div animation */ $(document).ready(function(){ // global variable for holding a fixed height increase var newHeight = 50; // global counter to keep track of which div is being clicked var counter = 1 // count the number of divs on this page, a total of 9 var divCount = $('.items').length; $('.items').click( function(){ for(i=1; i&lt;=divCount; i++){ // increase the global variable by 50 newHeight += 50; // set random width and height var randomWidth = Math.floor( Math.random() * 201 + 50 ); // generate a number from 50 - 250 var randomHeight = Math.floor( Math.random() * 201 + 50 ); $('#' + i).animate( {width:randomWidth, opacity:'0.3'}, 1000 ); $('#' + i).animate( {height:randomHeight, opacity:'1' }, 1000 ); $('#' + i).animate( {width:'50', opacity:'1'}, 1000 ); $('#' + i).animate( {height:newHeight, opacity:'1' }, 1000 ); } }); }); });//]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="items" id="1" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="2" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="3" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="4" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="5" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="6" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="7" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="8" status="true"&gt;&lt;/div&gt; &lt;div class="items" id="9" status="true"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the jsfiddle page.</p> <p><a href="http://jsfiddle.net/dennisboys/Qq247/" rel="nofollow">http://jsfiddle.net/dennisboys/Qq247/</a></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. USDennisboys
    plurals
    1. PL
      singulars
      1. LTLinked
    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
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COtry to add delay() before animate, where you will multiply some number for miliseconds by i: `$('#' + i).delay(5000*i).animate( {width:randomWidth, opacity:'0.3'}, 1000 ); $('#' + i).delay(5000*i).animate( {height:randomHeight, opacity:'1' }, 1000 ); $('#' + i).delay(5000*i).animate( {width:'50', opacity:'1'}, 1000 ); $('#' + i).delay(5000*i).animate( {height:newHeight, opacity:'1' }, 1000 );`
      singulars
      1. POMy jQuery animation works, but I want to improve it further
      1. USniklaz
    2. COHi niklaz, actually I tried delay(), but I might have put the function into a wrong place because even I use delay() the animation happen simultaneously. Like this "$('#' + i).animate( {width:'50', opacity:'1'}, 1000 ).delay(1000).animate( {height:newHeight, opacity:'1' }, 1000 )"
      singulars
      1. POMy jQuery animation works, but I want to improve it further
      1. USDennisboys
    3. COHi niklaz, your codes works but it lags very much and is not a good user-friendly animation. Is there any other way to achieve that?
      singulars
      1. POMy jQuery animation works, but I want to improve it further
      1. USDennisboys
 

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