Question

生病了。

我发现了一段代码，并且已经对它进行了相当多的修改，似乎有点工作。

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

问题在于我希望＆＃34;＃Homebutton＆＃34; 在Gnoll_Hit动画的中途变为红色。所以我拼接了Hit动画，但那并没有。

我想我必须使用Callbacks这样做，因为在最后一个动画完成后我想要它转到按钮链接。

Answer 1

是的，在动画完成后调用它，所以在第二个参数上添加一个函数并在那里进行下一组动画。

并提示：您应该尝试使用 jquery chaining

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

所以代码更容易阅读和更快。

然后你也可以在animate函数中使用$（this）

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

快乐编码：）

Answer 2

您可以在＃Homebutton-change-to-red子动画上使用jQuery的延迟（），或者您可以将虚拟变量从0“动画”为1，并使用步进函数来表达对行为的看法每次运行该函数时（动画的每一步都是一次）。

jQuery动画回调

2 个答案: