jquery - 单击后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

你的方法中有一个流氓“ ，”animate。如果您现在检查控制台，您现在会收到此错误：

Uncaught SyntaxError: Unexpected token ) 

改变：

}, 2000, ) //last line of the animate method

至

}, 2000)

和

height: "1px",

至

height: "1px"

而且，如果您尝试使带有 id 的元素重新box设置动画，则最好不要使用 id ，如下所示：clickanimate

$("#box").on("click", "input[type=button]", function () {
    $(this).parent("#box").animate({ //use parent
        top: "150px",
        left: "100px",
        width: "1px",
        height: "1px"
    }, 2000);
});

然后，在回调中，

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

Answer 2

这里似乎有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

        });
    });
});