Question

ill be brief.

I found a piece of code and have changed it up quite a bit and it kinda seems to work.

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

The problem is that I want the “#Homebutton” to change to red about halfway through the Gnoll_Hit animation. So I spliced the Hit animation but that didnt do it.

I think I gotta do this with Callbacks because after the last animation is finished I want it to go to the buttons link.

Answer 1

Yes, call it after the animate has finished, so add a function on the 2nd param and do the next set of animations there.

and some tip: you should try to use jquery chaining

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

so the code is a bit easier to read and bit faster.

then you can also use the $(this) inside the animate function

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

Happy coding 🙂