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动画回调

回答

相关问题