Dom7 - Custom DOM Library

    To start use it there is a global window function, but we recommend to assign it to some local variable with more handy name, like $$, but not to “$” to prevent confilicts with other libraries like jQuery or Zepto:

    1. $$('.something').on('click', function (e) {
    2.     $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
    3. });

    All these methods works almost in the same way and with the same arguments as in jQuery or Zepto:

    1. $$(window).trigger('resize');

    .animate(properties, parameters)- Perform a custom animation of a set of CSS properties

    • properties - object - CSS properties to animate
    • parameters - object - animation parameters
    1. $$('#animate-me').animate(
    2.     /* CSS properties to animate, e.g.: */
    3.     {
    4.         'margin-left': 100,
    5.         'width': 200,
    6.         'height': 300,
    7.         'opacity': 0.5
    8.     },
    9.     /* Animation parameters */
    10.     {
    11.         // Animation duraion in ms, optional (default to 300)
    12.         duration: 300,
    13.         // Animation easing, optional (default to 'swing'), can be also 'linear'
    14.         easing: 'swing',
    15.         /* Callbacks */
    16.         // Animation begins, optional
    17.         begin: function (elements) {
    18.             console.log('animation began');
    19.         },
    20.         // Animation completed, optional
    21.         complete: function (elements) {
    22.             console.log('animation completed');
    23.         },
    24.         // Animation in progress, optional
    25.         progress: function (elements, complete, remaining, start) {
    26.             /* Where
    27.             complete - The call's completion percentage (as a decimal value)
    28.             remaining - How much time remains until the call completes (in ms)
    29.             start - The absolute time at which the call began (in ms)
    30.             */
    31.             console.log('animation in progress');
    32.         }
    33.     }
    34. );

    It also supports chaining que:

    1. $$('#animate-me')
    2.     .animate(
    3.         {
    4.             'margin-left': 100,
    5.             'width': 200,
    6.             'height': 300,
    7.             'opacity': 0.5
    8.         }
    9.     )
    10.     .animate(
    11.         {
    12.             'width': 50,
    13.             'height': 50
    14.         }