static/js/main.js

   1 var
   2 arg = {
   3         'font-size':'2em',
   4         'transform':'rotate(5deg)'
   5 };
   6
   7 $(function(){
   8         $('div').on('click',function(){
   9                 var $title = $(this),
  10                         span1 = 1500,
  11                         span2 = 200;
  12                 $title.css(arg);
  13                 $({deg:5}).animate({deg:365},{
  14                         duration:500,
  15                         progress:function(){
  16                                 $title.css({
  17                                         '-webkit-transform':'rotate('+this.deg+'deg)',
  18                                         '-ms-transform':'rotate('+this.deg+'deg)',
  19                                         'ransform':'rotate('+this.deg+'deg)'
  20                                 });
  21                         }
  22                 });
  23                 $({deg:5}).delay(span1).animate({deg:0},{
  24                         duration:span2,
  25                         progress:function(){
  26                                 $title.css({
  27                                         '-webkit-transform':'rotate('+this.deg+'deg)',
  28                                         '-ms-transform':'rotate('+this.deg+'deg)',
  29                                         'transform':'rotate('+this.deg+'deg)'
  30                                 });
  31                         }
  32                 });
  33                 $title.delay(span1+span2).animate({'font-size':'1em'},1);
  34         });
  35 });