Home/ Questions/Q 9248967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T10:04:46+00:00

The callback on my custom function is not working. Please would anyone help me

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0