jQuery animate plugin
JavaScript
Latest commit eeeddd7 Dec 11, 2014 @butchi fix indent
Permalink
Failed to load latest commit information.
js
README.md
bower.json
index.html

README.md

jquery.anim

jQuery step animation plug-in.

Setup

download js/jquery.anim.js or install by bower

bower install jquery.anim

Sample

demo is here http://butchi.github.io/jquery.anim/

<p class="elm-1">This is an example of jQuery.anim plug-in.</p>
<p class="elm-2">This is an example of jQuery.anim plug-in.</p>
<p class="elm-3">This is an example of jQuery.anim plug-in.</p>
<p class="elm-4">This is an example of jQuery.anim plug-in.</p>
var $elm1 = $('.elm-1');
var width1 = $elm1.width();
$elm1.anim({
  duration: 5000,
  step: function(t) {
    $(this).css({
      'clip': 'rect(0 ' + (t * width1) + 'px 100px 0)'
    });
  },
  complete: function() {
    console.log('Thanks, world! 1');
  }
});

var $elm2 = $('.elm-2');
var width2 = $elm2.width();
$elm2.anim({
  duration: 5000,
  easing: 'easeInExpo',
  step: function(t) {
    $(this).css({
      'clip': 'rect(0 ' + (t * width2) + 'px 100px 0)'
    });
  },
  complete: function() {
    console.log('Thanks, world! 2');
  }
});

var $elm3 = $('.elm-3');
var txtElm3 = $elm3.text();
var txtElm3Len = txtElm3.length;
$elm3.anim({
  duration: 5000,
  step: function(t) {
      $(this).text(txtElm3.slice(0, Math.floor(txtElm3Len * t) + 1));
  }
});

var $elm4 = $('.elm-4');
$elm4.anim({
  easing: 'easeOutBounce',
  step: function(t) {
    $(this).css({
      'transform' : 'scale(' + t + ')',
      '-o-transform' : 'scale(' + t + ')',
      'msTransform' : 'scale(' + t + ')',
      '-moz-transform' : 'scale(' + t + ')',
      '-webkit-transform' : 'scale(' + t + ')',
    });
  }
});