Q:

jquery callback on custom function

The callback on my custom function is not working. Please would anyone help me ?
<html>
<body>
<script src='jquery-1.8.2.js'></script>
<script>
$(document).ready(function(e){
  function cb(){
    alert('animation finish');
  }
  $('button').bind({
    'click':function(e,cb){
        e.preventDefault();
        $('div').animate({'height':200,'width':200},1000);
        cb();
     }
  })
})
</script>
<style>
div{
  height:5px;width:5px;background-color:yellow;
}
</style>

<button>click me</button>
<div></div>

</body>
</html>

edited:
I cannot do the .animate(...,1000,function(){...})
I used the line
$('div').animate({'height':200,'width':200},1000);

just to represent some other functions in execution -- it is relative complicated, with more conditions, and different animations called depending upon various parameters.
Basically, after all those animations are over, I want a end function cb() to execute; which is where I am having the problem.
Maybe something like this would be appropriate : 
<script>
$(document).ready(function(e){
  var status=0;
  var tmp1=2;tmp2=7;
  function cb(){
    alert('animation finish');
    console.log(status);
  }

  function do_func1(){
     status = tmp1+tmp2;
     $('#ele1').animate({'height':200,'width':200},1000);
  }
  function do_func2(){
     status = tmp1*tmp2;
     $('#ele2').animate({'height':300,'width':300},2000);
  }
  function do_func3(){
     status = tmp1+tmp1;
     $('#ele3').animate({'height':400,'width':400},500);
  }

  function func1(){
     if('a'=='b'){
         do_func1();
     }else if('a'=='c'){
         do_func2();
     }else{
         do_func3();
     }
  }

  $('button').on({
    'click':function(e,cb){
        e.preventDefault();
        func1();
        cb();
     }
  })
})
</script>

A:

you can do somthing like this
  <script>

    function cb(){
        alert('animation finish');
    }

    //-----------------------
    $(function()
      {
        $('button').on('click',function(e)
          {
              e.preventDefault();
              var steps=0;
              var totalSteps=5;    // for example

              var checking=setInterval(function()
                                       {
                                         if(steps===totalSteps)
                                         {
                                           cb();
                                           clearInterval(checking);
                                         }
                                       },30);

            $('div').animate({'height':200,'width':200},1000, function(){steps++;});
            $('div').animate({...  another animation  },1000, function(){steps++;});
            ...
            $('div').animate({...  another animation  },1000, function(){steps++;});

         })  // ..on
    }) // ready function
 </script>

you can also change the step++ to anything else you want, and then write a proper condition inside the checking function in order to act upon it...

