Animating CSS properties with jQuery

Jquery Course

• animate() advanced options
• Color animation

You can animate an element on a page with jQuery by changing its CSS properties, setting them in a special jQuery function, called animate.

animate method

The animate() allows us to create animation effects on any numeric CSS property.
The animate() function can be used with this sintax:

animate(
{
 property1: value,
 property2: value,
 property3: value
}, duration, easing, complete)

- The set of CSS properties (within curly braces) is the only required parameter. You can add as many CSS properties as you need, but their name must be the name used in JavaScript (for example, marginLeft, instead of margin-left and backgroundColor instead of background-color).
- duration - (optional) sets the speed of the animation. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.
- easing - (optional) specifies the speed at which the animation progresses. There are two types of easing available to use in jQuery: "linear" and "swing" (default).
- complete - (optional) represents a function that is fired once the animation is complete.

jQuery will set the new CSS styles, but instead of setting them instantly (as CSS would do), it does so gradually, animating the effect at the chosen speed.
The animated properties can be fixed (e.g.: marginRight: '100px'), or relative, using += or -= to add or subtract the given number from the current value of the property (e.g.: marginRight: '+=80px').

Example. When a button is clicked, animates some properties of a <div>. When animation is finished, changes the text in the button:

<style type="text/css"><!--
#dv1 { width:50px; height:50px; background:#bebefe; font-size:11px; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="btn" is clicked, animate some properties of the element with id="dv1"
  // then change the text in the #btn
  $('#btn').click(function() {
    $('#dv1').animate(
    {
      width: '150px',
      height: '80px',
      marginLeft: '+=80px',
      fontSize: '22px'
    }, 2000, 'linear', function() {
      $('#btn').text('Click again');
    });
  });
});
--></script>

<div id="dv1">Some content</div>
<button id="btn">Click</button>

Demo:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle' (e.g.: width: 'toggle').
Example: Animates the element with id="dv" to toggle width, height, opacity and fontSize, completing the animation within 2500 milliseconds. When animation is finished, changes the text in the button.

<style type="text/css"><!--
#dv1 { display:none; width:150px; height:80px; background:#bebefe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="btn" is clicked, animate to toggle some properties of the element with id="dv1"
  // then change the text in the #btn
  $('#btn').click(function() {
    $('#dv1').animate({
      width: 'toggle',
      height: 'toggle',
      opacity: 'toggle',
      fontSize: 'toggle'
    }, 2500, function() {
      $('#btn').text('Click again');
    });
  });
});
--></script>

<div id="dv1">Some content</div>
<button id="btn">Click</button>

Demo:
In addition to style properties, some non-style properties such as scrollTop and scrollLeft can be animated.
Example. Animate scroll down the page 400 pixels, by setting the vertical scroll bar to +400 (scrollTop: '+=400'):

<script type="text/javascript"><!--
$(document).ready(function() {
  // when tag with id="btn" is clicked, sets the vertical scroll bar to +400
  $('#btn').click(function() {
    $('html, body').animate({
      scrollTop: '+=400'
    }, 1400, 'linear');
  });
});
--></script>

<button id="btn">Scroll Down</button>

Demo

animate() advanced options

The animate() method has an advanced version with additional options.
Syntax:

animate(
{
  property1: value,
  property2: value,
  property3: value
},
{
  duration: value,
  easing: value,
  complete: function() { code to execute when animation is finished },
  step: function(now, fx) { code to execute, using now and fx parameters },
  queue: boolean_value
})

- The set of CSS properties (within curly braces) is the only required parameter. You can add as many CSS properties as you need.
- duration - (optional) sets the speed of the animation; "fast", "slow", or a number that indicates the speed in milliseconds.
- easing - specifies the speed at which the animation progresses: "linear", or "swing" (default).
- complete - (optional) defines a function that will be executed when animation finished.
- step - (optional) a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx):
        - now - the numeric value of the property being animated at each step.
        - fx - a reference to the jQuery.fx object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.
              For example, to get the ID of the current animated element:     var id_elm = fx.elm.id;
- queue - (optional) a Boolean value (true, or false) indicating whether to place the animation in the effects queue.

The queue is the list of animations waiting to occur on a particular element. Every time we ask jQuery to perform an animation on an element, that animation is added to the queue. The element executes the queue one at a time until everything is complete. If you disable the queue (set false) when you specify an animation, the animation will begin immediately.

Example. Animate the height and width of two <div> elements. When the integer value of the width of the first DIV reaces 160, starts to animate the second element.

<style type="text/css"><!--
#dv1 { width:200px; height:80px; background:#a7a8fe; }
#dv2 { width:100px; height:40px; background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when tag with id="btn" is clicked, animates the width and height of two elements
  $('#btn').click(function() {
    // starts animate #dv1
    $('#dv1').animate(
    {
      width: '100px', height: '40px'
    },
    {
      duration: 2000,
      easing: 'linear',
      step: function(now, fx) {
        // gets the current width (integer) of the #dv1 during the animation
        var wh = Math.floor(now);

        // if the width of the #dv1 reaces 160, starts to animate #dv2
        if(wh==160) {
          $('#dv2').animate(
          {
            width: '200px', height: '80px'
          }, 2000);
        }
      }
    }
    );
  });
});
--></script>

<button id="btn">Click</button>
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>

Demo:

Color animation

The animate() method creates animation effects on numeric CSS property, most properties that are non-numeric (color, backgroundColor) cannot be animated using basic jQuery functionality.
To animate colors, you need a special jQuery plugin which can be downloaded from Color animation jQuery-plugin.
Or, you can copy the code below and save it in a ".js" file on your server.

jQuery Color Animations plugin

After you have saved the Color Animations plugin on your server, include it in your HTML document (in the <head>...</head> section). You must have both files with jQuery library and color plugin included in the HTML document, like in this sintax:

<head>
 <title>Page Title</title>
 <script type="text/javascript" src="jquery_library.js"></script>
 <script type="text/javascript" src="jq_color_plugin.js"></script>
</head>

You can now animate color properties in your jQuery animation code, just as you would other CSS properties.

Example. When the user clicks on an HTML element (a <div>), animate its width, height, backgroundColor, and color.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Color animation</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jq_color_animate.js"></script>
<style type="text/css"><!--
#dv1 { width:150px; height:60px; background:#a7a8fe; cursor:pointer; }
#dv1 em { display:none; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on element with id="dv1", animate its width, height, backgroundColor, and color
  $('#dv1').click(function() {
    $(this).animate(
    {
      'width':'300px', 'height':'100px',
      'backgroundColor':'#7efe8f', 'color':'#0101fe'
    }, 2000, function() {
      $(this).find('em').fadeIn(900);
    });
  });
});
--></script>
</head>
<body>
Click:
<div id="dv1">jQuery Tutorials, and other Web Development Courses:<br />
<em>coursesweb.net/javascript/</em></div>
</body>
</html>

Demo, click on the rectangle below:

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

.some_class {
  line-height: 150%;
}

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

$ar_dir = scandir("dir_name");
var_export($ar_dir);