{"id":38,"date":"2023-08-25T18:59:05","date_gmt":"2023-08-25T18:59:05","guid":{"rendered":"\/\/jqueryui.com\/?page_id=38"},"modified":"2024-04-26T16:40:25","modified_gmt":"2024-04-26T16:40:25","slug":"easing","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/easing\/","title":{"rendered":"Easing"},"content":{"rendered":"<p class=\"desc\">Apply an easing equation to an animation.<\/p>\n\n<div class=\"demo-list\" data-full-nav=\"true\"><h2>Examples<\/h2><ul><li><a href=\"\/resources\/demos\/effect\/default.html\">Effect demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/addClass.html\">addClass demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/animate.html\">Animate demo<\/a><\/li><li class=\"active\"><a href=\"\/resources\/demos\/effect\/easing.html\">Easing demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/hide.html\">Hide Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/removeClass.html\">removeClass Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/show.html\">Show Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/switchClass.html\">switchClass Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/toggle.html\">Toggle Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/toggleClass.html\">toggleClass Demo<\/a><\/li><\/ul><\/div><iframe src=\"\/resources\/demos\/effect\/easing.html\" class=\"demo-frame\"><\/iframe><div class=\"demo-description\">\n<p><strong>All easings provided by jQuery UI are drawn above, using an HTML canvas element<\/strong>. Click a diagram to see the easing in action.<\/p>\n<\/div><div class=\"view-source\"><a tabindex=\"0\"><i class=\"icon-eye-open\"><\/i> view source<\/a><div><div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n58\">58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n59\">59<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n60\">60<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n61\">61<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n62\">62<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n63\">63<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n64\">64<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n65\">65<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n66\">66<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n67\">67<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n68\">68<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n69\">69<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n70\">70<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n71\">71<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n72\">72<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n73\">73<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n74\">74<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n75\">75<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n76\">76<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n77\">77<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n78\">78<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n79\">79<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n80\">80<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n81\">81<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n82\">82<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n83\">83<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n84\">84<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n85\">85<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n86\">86<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n87\">87<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n88\">88<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n89\">89<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n90\">90<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n91\">91<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n92\">92<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n93\">93<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n94\">94<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n95\">95<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n96\">96<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n97\">97<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n98\">98<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n99\">99<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n100\">100<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n101\">101<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n102\">102<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n103\">103<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n104\">104<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery UI Effects - Easing demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/themes\/base\/jquery-ui.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/resources\/demos\/style.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.graph<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">float<\/span>: left;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">10px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.7.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/jquery-ui.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">if<\/span> ( !$( <span class=\"hljs-string\">\"&lt;canvas&gt;\"<\/span> )[<span class=\"hljs-number\">0<\/span>].getContext ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      $( <span class=\"hljs-string\">\"&lt;div&gt;\"<\/span> ).text(<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-string\">\"Your browser doesn't support canvas, which is required for this demo.\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ).appendTo( <span class=\"hljs-string\">\"#graphs\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">return<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> i = <span class=\"hljs-number\">0<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      width = <span class=\"hljs-number\">100<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      height = <span class=\"hljs-number\">100<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $.each( $.easing, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> name, impl <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Skip _default property<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-keyword\">typeof<\/span> impl !== <span class=\"hljs-string\">\"function\"<\/span> ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">return<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">var<\/span> graph = $( <span class=\"hljs-string\">\"&lt;div&gt;\"<\/span> ).addClass( <span class=\"hljs-string\">\"graph\"<\/span> ).appendTo( <span class=\"hljs-string\">\"#graphs\"<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        text = $( <span class=\"hljs-string\">\"&lt;div&gt;\"<\/span> ).text( name ).css({ <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">\"13px\"<\/span>, <span class=\"hljs-attr\">textAlign<\/span>: <span class=\"hljs-string\">\"center\"<\/span>, <span class=\"hljs-attr\">whiteSpace<\/span>: <span class=\"hljs-string\">\"nowrap\"<\/span> }).appendTo( graph ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        wrap = $( <span class=\"hljs-string\">\"&lt;div&gt;\"<\/span> ).appendTo( graph ).css( <span class=\"hljs-string\">'overflow'<\/span>, <span class=\"hljs-string\">'hidden'<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        canvas = $( <span class=\"hljs-string\">\"&lt;canvas&gt;\"<\/span> ).appendTo( wrap )[ <span class=\"hljs-number\">0<\/span> ];<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      canvas.width = width;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      canvas.height = height;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">var<\/span> drawHeight = height * <span class=\"hljs-number\">0.8<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        cradius = <span class=\"hljs-number\">10<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ctx = canvas.getContext( <span class=\"hljs-string\">\"2d\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.fillStyle = <span class=\"hljs-string\">\"black\"<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Draw background<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.beginPath();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.moveTo( cradius, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.quadraticCurveTo( <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, cradius );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( <span class=\"hljs-number\">0<\/span>, height - cradius );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.quadraticCurveTo( <span class=\"hljs-number\">0<\/span>, height, cradius, height );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( width - cradius, height );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.quadraticCurveTo( width, height, width, height - cradius );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( width, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( cradius, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.fill();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Draw bottom line<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.strokeStyle = <span class=\"hljs-string\">\"#555\"<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.beginPath();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.moveTo( width * <span class=\"hljs-number\">0.1<\/span>, drawHeight + <span class=\"hljs-number\">.5<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( width * <span class=\"hljs-number\">0.9<\/span>, drawHeight + <span class=\"hljs-number\">.5<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.stroke();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Draw top line<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.strokeStyle = <span class=\"hljs-string\">\"#555\"<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.beginPath();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.moveTo( width * <span class=\"hljs-number\">0.1<\/span>, drawHeight * <span class=\"hljs-number\">.3<\/span> - <span class=\"hljs-number\">.5<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineTo( width * <span class=\"hljs-number\">0.9<\/span>, drawHeight * <span class=\"hljs-number\">.3<\/span> - <span class=\"hljs-number\">.5<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.stroke();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Plot easing<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.strokeStyle = <span class=\"hljs-string\">\"white\"<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.beginPath();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.lineWidth = <span class=\"hljs-number\">2<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.moveTo( width * <span class=\"hljs-number\">0.1<\/span>, drawHeight );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      $.each( <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Array<\/span>( width ), <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> position <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">var<\/span> state = position \/ width,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          val = impl( state, position, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">1<\/span>, width );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ctx.lineTo( position * <span class=\"hljs-number\">0.8<\/span> + width * <span class=\"hljs-number\">0.1<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          drawHeight - drawHeight * val * <span class=\"hljs-number\">0.7<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      ctx.stroke();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Animate on click<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      graph.on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        wrap<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .animate( { <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-string\">\"hide\"<\/span> }, <span class=\"hljs-number\">2000<\/span>, name )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .delay( <span class=\"hljs-number\">800<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .animate( { <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-string\">\"show\"<\/span> }, <span class=\"hljs-number\">2000<\/span>, name );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      graph.width( width ).height( height + text.height() + <span class=\"hljs-number\">10<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"graphs\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n<\/div><\/div>\n\n<p>Want to learn more about easings? Check out\nthe <a href=\"https:\/\/api.jqueryui.com\/easings\/\">API documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Apply an easing equation to an animation. ExamplesEffect demoaddClass demoAnimate demoEasing demoHide DemoremoveClass DemoShow DemoswitchClass DemoToggle DemotoggleClass Demo All easings provided by jQuery UI are drawn above, using an HTML canvas element. Click a diagram to see the easing in action. view source 1 2 3 4 5 6 7 8 9 10 11 12 &hellip; <a href=\"https:\/\/jqueryui.com\/easing\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-38","page","type-page","status-publish","hentry","category-effects"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":2,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/38\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}