{"id":16114,"date":"2016-06-17T17:34:24","date_gmt":"2016-06-17T17:34:24","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=16114"},"modified":"2018-11-14T17:06:56","modified_gmt":"2018-11-14T17:06:56","slug":"web-design-jquery-animate","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/web-design-jquery-animate\/","title":{"rendered":"Web design:  jQuery animate()"},"content":{"rendered":"<p><script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.2\/jquery.min.js\"><\/script><br \/>\n<script src=\"\/javascripts\/jun17_16_b.js\"><\/script><\/p>\n<h1>The tutor shows an example of the jQuery animate() function.<\/h1>\n<p>&NewLine;<br \/>\nI&#8217;d call jQuery an extension, or library, of JavaScript.  It offers various effects perhaps more easily than using JavaScript alone.<\/p>\n<p>The text expansion by clicking the button below is accomplished via the code<\/p>\n<div style=\"font-family:monospace;font-size:110%;\">\n$(&#8220;#top_button&#8221;).bind(&#8220;click&#8221;,function(){<br \/>\n$(&#8220;#the_text&#8221;).animate({&#8220;fontSize&#8221;:&#8221;175%&#8221;}, 1000, &#8220;linear&#8221;);<br \/>\n});\n<\/div>\n<p>&NewLine;<\/p>\n<p><button id=\"b_jun17_16\" style=\"display:block;margin:auto;color:MidnightBlue;background-color:turquoise;font-size:125%;\">Click me for animate() effect:)<\/button><br \/>\n&NewLine;<\/p>\n<p id=\"p_jun17_16\" style=\"text-align:center;font-size:125%;color:MidnightBlue\">This text will change size:)<\/p>\n<p>&NewLine;<br \/>\n<button id=\"b_jun17_16_b\" style=\"display:block;margin:auto;color:MidnightBlue;background-color:turquoise;font-size:125%;\">Click me to return the text to normal:)<\/button><br \/>\n&NewLine;<\/p>\n<p>I&#8217;ll explain in more detail the code above in a coming post:)<\/p>\n<p>Source:<\/p>\n<p>Pollock, John.  <u>jQuery:  A Beginner&#8217;s Guide<\/u>.  New York:  McGraw-Hill, 2014.<\/p>\n<p>Jack of <a href=\"https:\/\/www.oracletutoring.ca\">Oracle Tutoring by Jack and Diane,<\/a> Campbell River, BC.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The tutor shows an example of the jQuery animate() function. &NewLine; I&#8217;d call jQuery an extension, or library, of JavaScript. It offers various effects perhaps more easily than using JavaScript alone. The text expansion by clicking the button below is &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.oracletutoring.ca\/blog\/web-design-jquery-animate\/\"> <span class=\"screen-reader-text\">Web design:  jQuery animate()<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[458,837],"tags":[1625,1654],"class_list":["post-16114","post","type-post","status-publish","format-standard","hentry","category-technology","category-web-design","tag-jquery","tag-jquery-animate"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/comments?post=16114"}],"version-history":[{"count":33,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16114\/revisions"}],"predecessor-version":[{"id":36180,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16114\/revisions\/36180"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=16114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=16114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=16114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}