javascript - jQuery - .animate 之后的链接

Question

我试图让我的代码在动画运行后跟随链接。

这个想法是“Gnoll”为您点击按钮，然后将您发送到链接。

到目前为止，这是我的代码：

它里面没有链接。

（此外，按钮颜色应该在“Hit”动画的一半左右改变。到目前为止，我在那个动画上失败了）

$(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" />');
            });


    });

});

如您所见，代码非常基础。链接应在最后一次后约 0.5 秒触发

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

Answer 1

我现在有点发现自己了 :) 仍然不完美，但没关系。

$('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;     
    });