jQuery動畫回調

我發現了一段代碼，並將其改變了很多，它似乎有用。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('dota').click(function(){ 

    }); 

     $('#Homebutton').toggle(function(){ 
      $('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');   
      $('.animateme').animate({ 
       left: '+=150', 
      }, 800, function() { 
       $('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />'); 
      }); 
      $('.animateme').animate({ 
       left: '+=0', 
      }, 500); 
      $('#Homebutton').html('<img src="Construct2/Images/buttonred.png" />'); 
      $('.animateme').animate({ 
       left: '+=0', 
      }, 500, function() { 
       $('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />'); 
       }); 


     }, function(){ 
      $('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />'); 
      $('.animateme').animate({ 
       left: '-=500', 
      }, 2200, function() { 
       $('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />'); 
      }); 
     }); 

     $('#AddOnbutton').toggle(function(){ 
      $('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');   
      $('.animateme').animate({ 
       left: '+=250', 
      }, 1000, function() { 
       $('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />') 
      }); 
      $('.animateme').animate({ 
       left: '+=0', 
      }, 1000, function() { 
       $('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />'); 
       }); 


     }, function(){ 
      $('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />'); 
      $('.animateme').animate({ 
       left: '-=500', 
      }, 2200, function() { 
       $('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />'); 
      }); 
     }); 

    }); 
</script>

的問題是，我想「#Homebutton」更改爲紅色關於通過Gnoll_Hit動畫半途而廢。所以我拼接了Hit動畫，但沒有做到。

我想我必須用回調來做這件事，因爲在最後一個動畫完成後，我希望它進入按鈕鏈接。

來源

2012-07-04 Schoening

是啊，我真的覺得你正在尋找一個「流量控制庫」，也就是更好比jQuery的。你可以用animate（）和setTimeout（）完成這個目標，但最終這種動畫風格需要比jquery提供的更徹底的時間線。 – BishopZ

是的，在動畫結束後調用它，所以在第二個參數中添加一個函數並在那裏執行下一組動畫。

和一些提示：你應該嘗試使用jQuery的鏈

$('.animateme') 
    .html('') 
    .animate(blah blah );

所以代碼是有點更容易閱讀和快一點。

那麼你也可以使用$（本）的動畫功能

.animate(blah blah , function(){ 
    $(this).animate(''); 
    });

快樂內部編碼:)

來源

2012-07-05 04:44:31 fedmich

您可以在＃Homebutton-change-to-red子動畫上使用jQuery的delay（），也可以將虛擬變量從0變爲1，並使用步進函數來獲得幻想行爲每次功能運行（這將是每一步動畫一次）。

來源

2012-07-04 23:04:42 shovemedia

jQuery動畫回調

回答

相關問題