jquery callback on custom function

Question

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>

I think .bind() is deprecated since 1.7.you should use .on() instead. — Ramin Omrani
– Ramin Omrani, Commented Jan 31, 2013 at 12:51
@raminomrani Thanks. corrected it. But the main problem remains. — maan81
– maan81, Commented Jan 31, 2013 at 14:22

Mandeep Pasbola · Accepted Answer · 2013-01-31 13:03:30Z

1

Try this :

$(document).ready(function (e) {
  $('button').bind({
    'click': function (e) {
        $('div').animate({
            'height': 200,
            'width': 200
        }, 1000, function () {
            cb()
        });
        e.preventDefault();
    }
  })
})

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

eg: http://jsfiddle.net/xP25Q/2/

edited Jan 31, 2013 at 13:03

answered Jan 31, 2013 at 12:57

Mandeep Pasbola

2,6392 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maan81 Over a year ago

I cannot do the .animate(...,1000,function(){...}) . I used the line $('div').animate({'height':200,'width':200},1000); to represent some other functions in execution; it is relative complicated, with more conditions, and different animations called depending upon various parameters.

yoav barnea · Accepted Answer · 2013-01-31 16:32:32Z

0

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

edited Jan 31, 2013 at 16:32

answered Jan 31, 2013 at 16:18

yoav barnea

6,0242 gold badges24 silver badges28 bronze badges

1 Comment

maan81 Over a year ago

Thanks. I get the idea. :)

KARASZI István · Accepted Answer · 2013-01-31 12:51:05Z

0

You're calling the event provided callback function not your previously defined one in your click event handler.

If you want to call your method, you can either rename the parameter in the event handler or rename your function and change the method call.

answered Jan 31, 2013 at 12:51

KARASZI István

31.5k9 gold badges106 silver badges133 bronze badges

1 Comment

maan81 Over a year ago

Would please provide me an example ? I'm not sure I understand.

Collectives™ on Stack Overflow

jquery callback on custom function

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related