2013-01-31 128 views
0

我的自定義函數的回調不起作用。請任何人幫助我?自定義函數上的jquery回調

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

請解釋這個問題。 –

+0

我認爲.bind()從1.7開始被棄用,您應該使用.on()代替。 – Ramin

+0

@raminomrani謝謝。糾正它。但主要問題仍然存在。 – maan81

回答

0

你可以做財產以後這樣

<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++到任何你想要的,然後寫一個檢查功能內的適當條件以便對其起作用...

+0

謝謝。我明白了。 :) – maan81

0

你調用事件提供的回調函數不是先前定義的一個在點擊事件處理程序。

如果您想調用您的方法,您可以重命名事件處理程序中的參數或重命名您的函數並更改方法調用。

+0

請給我舉個例子嗎?我不確定我明白。 – maan81

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/

+0

我不能做'.animate(...,1000,function(){...})'。我使用'$('div')。animate({'height':200,'width':200},1000);'代表執行中的其他函數;它是相對複雜的,具有更多的條件,並根據各種參數調用不同的動畫。 – maan81