CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://gsgd.co.uk:80/sandbox/jquery/easing/?","20100927040800","https://web.archive.org/","web","/_static/", "1285560480"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery Easing Plugin</title> <style type="text/css"> @import url(/web/20100927040800cs_/http://gsgd.co.uk/sandbox/jquery/blueprint/screen.css); .big { background:#EEE; height:100px; } .big a { display:block; padding:5px 0 0 10px; font-size:2em; } .code { background:#333; color:#EEE; } #media72 { margin-bottom:2em; } #media72 a { background:#C03205; display:block; padding:5px 10px; font-size:2em; color:#FFF; text-decoration:none; } #media72 a:hover { background:#A01205; } #media72 small { font-size:0.5em; display:none; } #media72 a:hover small { display:block; text-align:right; } </style> <script src="https://web.archive.org/web/20100927040800js_/http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">_uacct = "UA-159271-1"; urchinTracker(); </script> <script src="/web/20100927040800js_/http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script> <script src="/web/20100927040800js_/http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>  <script type="text/javascript"> $(document).ready(function() { jQuery.easing.def = 'easeOutBounce'; // $('<div id="controls">').appendTo('#examples'); var sel1 = $("<select>").appendTo('#controls'); for (x in jQuery.easing) { if (x != 'linear' && x != 'swing') sel1.append($('<option>').attr('value', x).text(x)); } sel2 = sel1.clone().appendTo('#controls'); sel1.val('easeInOutCirc'); sel2.val('easeOutBounce'); $("#toggle").click(function(e){ e.preventDefault(); this.blur(); // var el = $('#' + this.href.split('#')[1]); var method1 = sel1.val(); var method2 = sel2.val(); $('#example').animate({height:200}, {duration: 1000, easing: method1}).animate({height:100}, {duration: 1000, easing: method2}); }); $('#paypal').hover(function(){ this.src = '/sandbox/beer_f2.png'; }, function() { this.src = '/sandbox/beer.png'; }); $('h2').css({background:"#FFB"}).toggle(function() { $(this).animate({width:300}, 1000);},function() { $(this).animate({width:"100%"}, 1000);}) }); </script> </head> <body> <div class="container"> <div class="column span-24"> <h1>jQuery Easing Plugin (version 1.3)</h1> <hr/> <div class="column span-12"> <script type="text/javascript"> </script> <script type="text/javascript" src="https://web.archive.org/web/20100927040800js_/http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <h2>Description</h2> <p>A jQuery plugin from <a class="notag" href="https://web.archive.org/web/20100927040800/http://gsgd.co.uk/">GSGD</a> to give advanced easing options. </p> <p class="box"> <strong>Please note</strong>, the easing function names changed in version 1.2.</p> <h2>Download</h2> <p>Download the following:</p> <ul> <li><a href="jquery.easing.1.3.js">jquery.easing.1.3.js</a></li> <li><a href="jquery.easing.compatibility.js">jquery.easing.compatibility.js</a> <br/>(use this if you don't want to have to change your easing type names)</li> </ul> <div id="media72"> <a href="https://web.archive.org/web/20100927040800/http://53a5e7tl15587k90xn3kjg24r3.hop.clickbank.net/" target="_top">Web Hosting : Unlimited Websites, Free Domain, Live Support. <small>(referral link)</small></a> </div> <div id="examples"> <h2>Example</h2> <p>Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all.</p> <p>Select easing types for the demo first one for down, second one for up. Then click the clicker.</p> <p id="controls"></p> <p id="example" class="big"><a href="#example" id="toggle">The Clicker</a></p> </div> <h3>Updates</h3> <p><strong>12/11/07</strong> 1.3 jQuery easing now supports a default easing mode. Define your preferred animation once for ALL animation.</p> <p><strong>04/10/07</strong> 1.2 Updated to include all methods from Robert Penners easing equations. Renamed the equations. Added a compatibility plugin to remap the old names to the new. Worked out how extend works, so it properly no longer overwrites the defaults.</p> <p><strong>28/06/07</strong> 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3.</p> <p><strong>22/06/07</strong> Rewritten the above to include callback syntax, nothing else has changed.</p>  <h3>Advertisements</h3> <ul style="list-style: none; border: 0px; border-spacing: 0px; background-color: #EEEEEE; overflow: hidden; padding: 0; margin: 0; width: 100%;"> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;"> <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.onlyrumor.com/">LG Rumor Accessories</a> </span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;"> <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.officesupplyoutfitters.com/">Laser Printer Toner</a> </span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;">mp3 m4r <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.pisamba.com/">free ringtones</a> iphone</span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;">windows XP <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://screenpass.net/">auto shutdown</a> solution</span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;"> <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.languagerealm.com/">Translation Resources</a> </span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;"> <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.opendi.co.uk/">Directory</a> </span></li> <li style="margin: 0; float: left; width: 100%; display: inline; clear: none; padding: 0;"><span style="color: #000000; margin: 0; display: block; padding: 3px; font-size: 12px; width: 100%;"> <a style="font-size: 12px; color: #666666;" href="https://web.archive.org/web/20100927040800/http://www.medifasthealth.org/">Medifast Weight Loss Program</a> </span></li> </ul><script type="text/javascript"> </script> <script type="text/javascript" src="https://web.archive.org/web/20100927040800js_/http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="column span-11 prepend-1 last"> <script type="text/javascript"> /* <![CDATA[ */ function affiliateLink(str){ str = unescape(str); var r = ''; for(var i = 0; i < str.length; i++) r += String.fromCharCode(3^str.charCodeAt(i)); document.write(r); } affiliateLink('%3Fb%23kqfe%3E%21kwws9%2C%2Cttt-wf%7Bw.ojmh.bgp-%60ln%2C%3Cqfe%3E%3A%3A45%3A%21%3D%3Fjnd%23pq%60%3E%21kwws9%2C%2Cttt-wf%7Bw.ojmh.bgp-%60ln%2Cjnbdfp%2Cabmmfqp%2Cpmlqf.2%3B3%7B53-dje%21%23alqgfq%3E%213%21%23bow%3E%21Wf%7Bw%23Ojmh%23Bgp%21%2C%3D%3F%2Cb%3D'); /* ]]> */ </script> <h2>Credits</h2> <p>Uses <a class="notog" href="https://web.archive.org/web/20100927040800/http://www.robertpenner.com/easing/">Robert Penners easing equations</a> for the transitions.</p> <h3>Donate</h3> <p>If you use this in a commercial project, you might consider a buying me a beer by way of thanks. Use the button below to donate to the beer fund via paypal.</p> <form action="https://web.archive.org/web/20100927040800/https://www.paypal.com/cgi-bin/webscr" method="post"> <p><input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="paypal@gsgd.co.uk"> <input type="hidden" name="item_name" value="A Beer"> <input type="hidden" name="buyer_credit_promo_code" value=""> <input type="hidden" name="buyer_credit_product_category" value=""> <input type="hidden" name="buyer_credit_shipping_method" value=""> <input type="hidden" name="buyer_credit_user_address_change" value=""> <input type="hidden" name="no_shipping" value="1"> <input type="hidden" name="return" value="http://gsgd.co.uk/sandbox/jquery/thanks/"> <input type="hidden" name="cancel_return" value="http://gsgd.co.uk/sandbox/jquery/"> <input type="hidden" name="cn" value="Say hello if you like"> <input type="hidden" name="currency_code" value="GBP"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="lc" value="GB"> <input type="hidden" name="bn" value="PP-DonationsBF">  <input type="image" src="/web/20100927040800im_/http://gsgd.co.uk/sandbox/beer.png" id="paypal" border="0" name="submit" alt="Make a donation via paypal"> </p> </form> <h2>Usage</h2> <h3>Default</h3> <p>Choose a default easing method to overwrite the standard 'swing' animation. The easing default is 'easeOutQuad', specify your own using the following:</p> <div class="code box"> <code>jQuery.easing.def = "string";</code> </div> <p>Where string is one of the equation names. The old swing function is renamed to jswing.</p> <h3>Custom</h3>  <p>There are two ways to specify a custom easing method, the following are functionally identical:</p> <div class="code box"> <code>$(element).slideUp(1000, method, callback}); $(element).slideUp({ duration: 1000, easing: method, complete: callback});</code> </div> <p><strong>duration:</strong> is basically speed, so milliseconds or slow/fast will work here.</p> <p><strong>easing:</strong> takes an ease method see below for options (<strong>note to previous users of the plugin</strong> this has changed from easeMethod) </p> <p><strong>callback</strong>: takes a pre defined function name or an anonymous function() {} block.</p> <p>Please note, <strong>you can't mix the syntax</strong>, use one format or the other, or it won't work properly.</p> <h3>Bonus feature</h3> <p><strong>jQuery.easing.method()</strong> All your scripts can use these equations. Call from some kind of time based loop as follows:</p> <div class="code box"> <code>jQuery.easing.method( null<sup>&dagger;</sup>, current_time, start_value, end_value, total_time)</code> </div> <p><sup>&dagger;</sup> this is an extra parameter not needed for the equations, but necessary for compatibility with jQuery</p> <p>© 2010 <a href="https://web.archive.org/web/20100927040800/http://gsgd.co.uk/">GSGD</a></p> <div id="media72"> <a href="https://web.archive.org/web/20100927040800/http://092f4ciop486dlb6e9sedjatc8.hop.clickbank.net/" target="_top">A Complete Step By Step Blueprint To Starting A Web Hosting Company. <small>(referral link)</small></a>  </div> </div> </div> </body> </html>