2

会很简短。

我找到了一段代码并对其进行了相当多的更改，它似乎有点工作。

<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动画，但没有这样做。

我想我必须用回调来做到这一点，因为在最后一个动画完成后，我希望它转到按钮链接。

4

2 回答 2

1

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

和一些提示：你应该尝试使用jquery 链接

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

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

那么你也可以在 animate 函数中使用 $(this)

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

快乐编码:)

于 2012-07-05T04:44:31.307 回答
0

您可以在 #Homebutton-change-to-red 子动画上使用 jQuery 的 delay()，或者您可以“动画”一个从 0 到 1 的虚拟变量，并使用步进函数每次函数运行（动画的每一步都会运行一次）。

于 2012-07-04T23:04:42.490 回答