| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
|---|
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 3 | |
|---|
| 4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
|---|
| 5 | <head> |
|---|
| 6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|---|
| 7 | |
|---|
| 8 | <title>test</title> |
|---|
| 9 | |
|---|
| 10 | <script src="src/core.js"></script> |
|---|
| 11 | <script src="src/support.js"></script> |
|---|
| 12 | <script src="src/data.js"></script> |
|---|
| 13 | <script src="src/queue.js"></script> |
|---|
| 14 | <script src="src/attributes.js"></script> |
|---|
| 15 | <script src="src/event.js"></script> |
|---|
| 16 | <script src="src/sizzle/sizzle.js"></script> |
|---|
| 17 | <script src="src/sizzle-jquery.js"></script> |
|---|
| 18 | <script src="src/traversing.js"></script> |
|---|
| 19 | <script src="src/manipulation.js"></script> |
|---|
| 20 | <script src="src/css.js"></script> |
|---|
| 21 | <script src="src/ajax.js"></script> |
|---|
| 22 | <script src="src/effects.js"></script> |
|---|
| 23 | <script src="src/offset.js"></script> |
|---|
| 24 | <script src="src/dimensions.js"></script> |
|---|
| 25 | </head> |
|---|
| 26 | |
|---|
| 27 | <body> |
|---|
| 28 | <h1>.delay() bugfix and extension</h1> |
|---|
| 29 | <p>Needs more testing...</p> |
|---|
| 30 | <h2>Updated description .delay()</h2> |
|---|
| 31 | <p>.delay( [ delayId ], duration, [ queueName ] )<br/> |
|---|
| 32 | delayId = An optional string containing the name of the delay id. The delay can be interrupted by using .removeDelay( delayId ).<br/> |
|---|
| 33 | duration = An integer indicating the number of milliseconds to delay execution of the next item in the queue.<br/> |
|---|
| 34 | queueName = A string containing the name of the queue. Defaults to fx, the standard effects queue.<br/> |
|---|
| 35 | </p> |
|---|
| 36 | <h2>Updated description .clearQueue()</h2> |
|---|
| 37 | <p>.clearQueue( [ queueName ] )<br/> |
|---|
| 38 | queueNameA = string containing the name of the queue. Defaults to fx, the standard effects queue.<br /><br /> |
|---|
| 39 | Also clears all delays of the element.<br/> |
|---|
| 40 | </p> |
|---|
| 41 | <h2>New description .removeDelay( [ delayId ], [ queueName ] )</h2> |
|---|
| 42 | <p>.delay( [ delayId ], duration, [ queueName ] )<br/> |
|---|
| 43 | delayId = An optional string containing the name of the delay id. If no delayId is given, the last delay of the element will be canceled.<br/> |
|---|
| 44 | queueName = A string containing the name of the queue. Defaults to fx, the standard effects queue.<br/><br /> |
|---|
| 45 | Currently you need to clear all delays of an element, before you can append new operations the the element or you call .clearQueue() first. |
|---|
| 46 | </p> |
|---|
| 47 | |
|---|
| 48 | <h2>Tests</h2> |
|---|
| 49 | <p><button>Run delay tests</button></p> |
|---|
| 50 | <div class="first">first</div> |
|---|
| 51 | <div class="second">second</div> |
|---|
| 52 | <div class="third">third</div> |
|---|
| 53 | <div class="fourth">fourth</div> |
|---|
| 54 | <div class="fifth">fifth</div> |
|---|
| 55 | <script type="text/javascript"> |
|---|
| 56 | $("button").click(function() { |
|---|
| 57 | $("div.first").delay("timeout1",800).fadeTo(400,0).delay(800).fadeTo(400,1); |
|---|
| 58 | $("div.first").removeDelay("timeout1"); |
|---|
| 59 | |
|---|
| 60 | $("div.second").delay(800).fadeTo(400,0).delay("timeout1",800).fadeTo(400,1); |
|---|
| 61 | $("div.second").removeDelay("timeout1"); |
|---|
| 62 | |
|---|
| 63 | $("div.third").delay(800).fadeTo(400,0).delay(800).fadeTo(400,1); |
|---|
| 64 | $("div.third").removeDelay(); |
|---|
| 65 | |
|---|
| 66 | $("div.fourth").delay(800).fadeTo(400,0).delay(800).fadeTo(400,1); |
|---|
| 67 | $("div.fourth").clearQueue(); |
|---|
| 68 | $("div.fourth").clearQueue(); |
|---|
| 69 | $("div.fourth").delay(2800).fadeTo(0,1).fadeTo(400,0.5); |
|---|
| 70 | |
|---|
| 71 | $("div.fifth").delay(800).fadeTo(400,0).delay(800).fadeTo(400,1); |
|---|
| 72 | $("div.fifth").removeDelay(); |
|---|
| 73 | $("div.fifth").removeDelay(); |
|---|
| 74 | $("div.fifth").delay(2800).fadeTo(0,1).fadeTo(400,0.5); |
|---|
| 75 | |
|---|
| 76 | }); |
|---|
| 77 | </script> |
|---|
| 78 | </body> |
|---|
| 79 | </html> |
|---|