Question

我的自定义功能上的回调无法正常工作。请有人帮帮我吗？

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

编辑： 我做不到.animate(...,1000,function(){...}) 我用了这行

$('div').animate({'height':200,'width':200},1000);

仅表示执行中的其他一些功能 - 它相对复杂，具有更多条件，并且根据各种参数调用不同的动画。

基本上，在所有这些动画结束后，我想要一个结束函数cb()来执行;这就是我遇到问题的地方。

也许这样的事情是合适的：

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

Answer 1

试试这个：

$(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');
}

例如：http://jsfiddle.net/xP25Q/2/

Answer 2

您正在调用事件提供的回调函数，而不是之前在Click事件处理程序中定义的回调函数。

如果要调用方法，可以在事件处理程序中重命名参数，也可以重命名函数并更改方法调用。

Answer 3

你可以做这样的事情

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

您也可以将step++更改为您想要的任何其他内容，然后在检查功能中写出适当的条件，以便对其采取行动......

自定义函数的jquery回调

3 个答案: