单击后 jQuery 动画将不起作用

Question

<script>

    var swidth = $(window).width();
    var sheight = $(window).height();

    $(document).ready(function(){


        $("#box").animate({    //animates depending on screen size

            top: (sheight*0.22)+"px",
            left: (swidth*0.25)+"px",
            width:(swidth*0.3)-40+"px",
            height: (sheight*0.35)-40+"px",

        }, 2000, function(){

            $('<input type="button" value="My button">').appendTo(this)
            .click(function(){ 

                $(this).animate({  // reverses animation back to original size and location


                top: "150px",
                left: "100px",
                width:"1px",
                height: "1px",

                }, 2000, )

            });
        });


    });

</script>

如果我更换...

            $(this).animate({  // reverses animation back to original size and location


            top: "150px",
            left: "100px",
            width:"1px",
            height: "1px",

            }, 2000, )

...与...

alert("You clicked me!");

...它有效。所以错误在某处的反向动画中。但是哪里？感谢您提前回答!

Answer 1

这里好像有2个问题

1. 一个extra的语法问题，
2. 您正在为错误的元素设置动画，在注册到按钮的点击处理程序中 this 指向被点击的按钮，但您需要为 #box 元素设置动画，这是按钮的父元素

尝试

$(document).ready(function(){
    $("#box").animate({
        top: (sheight*0.22)+"px",
        left: (swidth*0.25)+"px",
        width:(swidth*0.3)-40+"px",
        height: (sheight*0.35)-40+"px",
    }, 2000, function(){
        $('<input type="button" value="My button">').appendTo(this).click(function(){ 
            $(this).parent().animate({ //you need to animate the parent element #box, here this is the button you clicked
                top: "150px",
                left: "100px",
                width:"1px",
                height: "1px",
            }, 2000 ) //additional , here

        });
    });
});