javascript - JQuery animation effects immediately revert after animation

Question

I feel like I am going crazy here. I am playing around with JQuery animation. Something I haven't really used since school.

I am doing something super simple. I have a div that is just a square that is 150px by 150px I am using JQuery to animate it to grow the width. As soon as the animation completes, the square reverts back to the original dimensions.

Now I seem to remember that the animation effects would stay changed once the animation completes. Has this changed? Or am I simply misremembering how this works? All the examples I have seen on W3 schools and such have the animation stay once it is complete.

        #square
        {
            width: 150px;
            height: 150px;
            background-color: red;
            margin:10px;
        }

            $("#square").click(function(){
                (this).animate({width:"400px"}, 2000);
            });

question from:https://stackoverflow.com/questions/65913283/jquery-animation-effects-immediately-revert-after-animation

Answer 1

use $(this) that's the problem :

  $("#square").click(function(){
            $(this).animate({width:"400px"}, 2000);
        });