{"id":17115,"date":"2017-05-29T16:15:37","date_gmt":"2017-05-29T13:15:37","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17115"},"modified":"2017-12-21T15:25:30","modified_gmt":"2017-12-21T13:25:30","slug":"jquery-animation-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-animation-example\/","title":{"rendered":"JQuery Animation Example"},"content":{"rendered":"

Hello, readers of this article we will take a look on how to use the JQuery animation feature. We will learn how to implement a few simple examples using the JQuery API and also we will check some details of the method animate provided by the API. Before we start, check the requirements related to the technologies and the frameworks used to the example below:<\/p>\n

    \n
  1. jquery 3.2.1<\/li>\n
  2. HTML<\/li>\n
  3. CSS<\/li>\n<\/ol>\n

     
    \n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

    1. Introduction<\/h2>\n

    The JQuery API provides a method called .animate()<\/code>. This method allows creating animations using CSS properties. the required parameter for this method is a plain javascript object with a set of CSS properties.<\/p>\n

    1.2 Properties And Values Overview<\/h3>\n

    An important detail about the CSS properties object is that only the numeric values can be animated. This means that properties like, width,<\/code> height<\/code> and left<\/code> can be animated, but other properties like background-color<\/code> cannot be. By default, the numeric values passed to the method are treated as pixels. If you want to specify other unit measures, you can use em<\/code> or %<\/code> when is applicable.<\/p>\n

    Other properties values like strings can be sent to this method. The strings that can be used are,'show'<\/code> 'hide'<\/code> and 'toggle'<\/code>. These shortcuts allow creating a custom hiding or showing animation, taking into account the element’s display property.<\/p>\n

    An interesting feature that this method has, it allows using relative values. If you pass +=<\/code> or -=<\/code> character sequence, the target value is computed adding or subtracting the passed number using the element’s current property value.,<\/p>\n

    1.3 Duration<\/h3>\n

    The duration parameter allows passing the period of time for the animation. This value is in milliseconds. Higher values indicate slow animations and lower values indicates fast animations. This parameter also allows pass the strings 'fast'<\/code> and 'slow'<\/code>.<\/p>\n

    1.4 Callback functions<\/h3>\n

    The function parameter allows passing a function based on the different callbacks provided by the API. The callbacks are, start,<\/code> step<\/code>, progress<\/code>, complete<\/code>, done<\/code>, fail<\/code> and always<\/code>. These callbacks are called on the base element. If you have various elements to animate, these functions are executed per element.<\/p>\n

    On this example, we’ll implement different basic examples to understand how this feature works.<\/p>\n

    2. Setup Environment<\/h2>\n

    For implement this example we need the next tools:<\/p>\n

      \n
    1. Web Browser (Chrome, FireFox, etc..), to check the Jquery browser compatibility please check this<\/a> URL<\/li>\n
    2. Text Editor (ATOM, Brackets, Notepad++, etc..)<\/li>\n<\/ol>\n

      In order to implement these examples, we’ll use the JQuery CDN. Also, you can download the JQuery library on a non-minified version for development purposes from here<\/a>.<\/p>\n

      3. Examples implementation<\/h2>\n

      On this section, we’ll create a few basic examples to illustrate and understand how the JQuery animation API works.<\/p>\n

      The example below shows how to move an HTML element using the .animate()<\/code> method passing a simple CSS properties object.<\/p>\n

      basic_animation.html<\/em><\/span><\/p>\n

      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<script> \r\n$(document).ready(function(){\r\n    $(\"#animation\").click(function(){\r\n        $(\"#figure\").animate({left: '250px'});\r\n        \/\/The CSS property object are passed\r\n    });\r\n});\r\n<\/script>\r\n<style>\r\n.circle:before {\r\n  content: ' \\25CF';\r\n  font-size: 200px;    \r\n}\r\n.circle{\r\n        position:absolute;\r\n    }    \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<button id=\"animation\">Start Animation<\/button>\r\n<p>This example shows a basic animation using the CSS properties object parameter, keep in mind that all HTML element are static by default we need to set the element's CSS position property of the element to relative, fixed, or absolute!<\/p>\r\n    \r\n    <div id=\"figure\" class=\"circle\"><\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
      The example below shows how to use the animate method passing a CSS properties object and duration time for the animation.<\/p>\n
      duration_animation.html<\/em><\/span><\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<style>\r\ndiv {\r\n  background-color: #bca;\r\n  width: 100px;\r\n  border: 1px solid blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <button id=\"go\">\u00bb Run<\/button>\r\n  <div id=\"block\">Hello! Web Code Geek<\/div>\r\n\r\n  <script>\r\n\r\n$( \"#go\" ).click(function() {\r\n  $( \"#block\" ).animate({\r\n    width: \"70%\",\r\n    opacity: 0.4,\r\n    marginLeft: \"0.6in\",\r\n    fontSize: \"3em\",\r\n    borderWidth: \"10px\"\r\n  }, 1500 );\/\/CSS properties object and duration\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
      The example below shows how to use the duration string and a callback function that by default will be executed when the animation is complete.<\/p>\n
      callback_animation.html<\/em><\/span><\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n  <button id=\"go\">\u00bb Animate<\/button>\r\n  <p>This example shows a basic animation using the CSS properties object parameter,\r\n    duration string and a callback function that is executed by default when the animation is complete\r\n  <\/p>\r\n\r\n  <script>\r\n$( \"#go\" ).click(function() {\r\n  $( \"p\" ).animate({\r\n    height: 200,\r\n    width: 400,\r\n    opacity: 0.5\r\n  }, \"slow\", function (){\r\n    alert(\"The animation is complete\");\r\n  } );\/\/CSS properties object, duration string and a callback function\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
      The example below shows how to use the JQuery animation API passing CSS relative properties values and using the duration string value in order to indicate the animation speed.<\/p>\n
      relative_values_animation.html<\/em><\/span><\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<style>\r\n  div {\r\n    position: absolute;\r\n    background-color: #058CFA;\r\n    left: 50px;\r\n    width: 90px;\r\n    height: 90px;\r\n    margin: 5px;\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<button id=\"left\">left<\/button>\r\n<button id=\"right\">right<\/button>\r\n<div class=\"block\"><\/div>\r\n \r\n<script>\r\n$( \"#right\" ).click(function() {\r\n  $( \".block\" ).animate({ \"left\": \"+=50px\" }, \"slow\" );\/\/passing relative values\r\n});\r\n \r\n$( \"#left\" ).click(function(){\r\n  $( \".block\" ).animate({ \"left\": \"-=50px\" }, \"slow\" );\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
      The example below shows how to use the callbacks on the animate API, in this case, we used the step callback that is called when each animated property passed on the CSS properties object, this callback function is useful for altering the animation when it is occurring.<\/p>\n
      This callback function also provides 2 paramters now<\/code> and fx<\/code>.<\/p>\n