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:
Just everything you already know:
$$('.something').on('click', function (e) {
$$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
});
$$(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
$$('#animate-me').animate(
/* CSS properties to animate, e.g.: */
{
'margin-left': 100,
'width': 200,
'height': 300,
'opacity': 0.5
},
/* Animation parameters */
{
// Animation duraion in ms, optional (default to 300)
duration: 300,
// Animation easing, optional (default to 'swing'), can be also 'linear'
easing: 'swing',
/* Callbacks */
// Animation begins, optional
begin: function (elements) {
console.log('animation began');
},
// Animation completed, optional
complete: function (elements) {
console.log('animation completed');
},
// Animation in progress, optional
progress: function (elements, complete, remaining, start) {
/* Where
complete - The call's completion percentage (as a decimal value)
remaining - How much time remains until the call completes (in ms)
start - The absolute time at which the call began (in ms)
*/
console.log('animation in progress');
}
}
);
It also supports chaining que:
$$('#animate-me')
.animate(
{
'margin-left': 100,
'width': 200,
'height': 300,
'opacity': 0.5
}
)
.animate(
{
'width': 50,
'height': 50
}