CODEWITHSUNDEEP
jquerycssbuttonjquery-animate
Greg Peckory
Greg Peckory

Reputation: 8068

jQuery animation won't work after click

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

If I replace...

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


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

            }, 2000, )

...with...

alert("You clicked me!");

...it works. So the error is in the reverse animation somewhere. But where? Thanks for any answers in advance !

Upvotes: 0

Views: 250

Answers (2)

krishwader
krishwader

Reputation: 11371

You've got a rogue "," in your animate method. You'd be getting this error right now if you check your console right now : 

Uncaught SyntaxError: Unexpected token )

Change: 

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

to 

}, 2000)

and 

height: "1px",

to 

height: "1px"

And if you are trying to make the element with id box to animate back, you'd be better off keeping your click out of animate, like this : 

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

Then, in the callback, 

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

There seems to be 2 problems here

  1. A syntax problem of extra ,
  2. You are animating the wrong element, in the click handler registered to the button this points to the clicked button but you need to animate the #box element which is the parent element of the button

Try

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

        });
    });
});

Upvotes: 1

Related Questions