{"id":3535,"date":"2015-04-12T20:42:04","date_gmt":"2015-04-13T02:42:04","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3535"},"modified":"2016-01-29T01:31:28","modified_gmt":"2016-01-29T07:31:28","slug":"animating-arbitrary-values-with-jquery","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2015\/04\/12\/animating-arbitrary-values-with-jquery\/","title":{"rendered":"Animating arbitrary values with jQuery"},"content":{"rendered":"<p>jQuery's animate is useful for animating CSS properties, but there are times that you want to take advantage of the bookkeeping that jQuery provides to animate, with easing functions etc., but not to change an animatable property. The <a href=\"http:\/\/malsup.github.io\/jquery.cycle2.flip.js\">flip plugin<\/a> for Mike Alsup's cycle2 has a clever hack to animate some otherwise unused property instead:<\/p>\n<pre><code class=\"language-html demo\" >\r\n&lt;input type=button value=\"Click Me\" id=rotatebutton \/&gt;\r\n&lt;div id=rotatetest style=\"height: 100px; width: 100px; background: #abcdef\" &gt;Whee!&lt;\/div&gt;\r\n<\/code><\/pre>\n<pre><code class=\"language-javascript demo\" >\r\n$('#rotatebutton').click(function(){\r\n  $('&lt;div&gt;'). \/\/ create an unused element (could use a preexisting one to save some time and memory)\r\n    animate({lineHeight: 360}, \/\/ we aren't really using lineHeight; we just want something numeric.\r\n      \/\/ We want it to go from 0 (the default for anything that has a value of 'auto') to 360\r\n    {\r\n      duration: 2000,\r\n      easing: 'easeOutElastic', \/\/ use jQuery and jQuery UI to manage the animation timing\r\n      step: function (now){\r\n        $('#rotatetest').css('transform', 'rotate('+now+'deg)'); \/\/ use the number that animate gives us\r\n      }\r\n    });\r\n});\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>jQuery's animate is useful for animating CSS properties, but there are times that you want to take advantage of the bookkeeping that jQuery provides to animate, with easing functions etc., but not to change an animatable property. The flip plugin for Mike Alsup's cycle2 has a clever hack to animate some otherwise unused property instead: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3535"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3535"}],"version-history":[{"count":11,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions"}],"predecessor-version":[{"id":3559,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions\/3559"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}