Question

I’m trying to make my code follow a link after an animation has run.

The idea is that the “Gnoll” hits the button for you and that will send you to the link.

This is my Code so far:

It has not the Link inside it.

(Also, the button color is supposed to change about halfway through the “Hit” animation. So far I have failed on that one)

$(document).ready(function(){


    $('.Homebutton').click(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);

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

    });

    $('#AddOnbutton').click(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" />');
            $("#AddOnbutton").html('<img src="Construct2/Images/redbutton.png" />');
            });


    });

});

The code is very base as you can see.
The link should be triggered about 0.5 sec after the last

$('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');

Answer 1

I have kinda Found out myself now 🙂
Still not Perfect, But it’s OK.

$('a.home').click(function(){
    var newLocation = $(this).attr('href');
        $('.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);

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

            document.location = newLocation;
            });
            return false;     
    });