I believe the argument passed into hide() is the issue. For this line of code: $("#1").hide("#1"), you are selecting #1 and running .hide() on it, so you do not need to pass in "#1" into the hide function.
The hide() function takes two parameters by default .hide( [duration ] [, complete ] ) where duration is a string or an integer and complete is a callback function (a function that runs after hide() completes). In this case, it thinks "#1" is the duration. I believe it is trying to use that value as the duration which is why you are seeing that animation.
.hide( [duration ] [, complete ] )
Changing $("#1").hide("#1") to $("#1").hide() should fix it, as that will hide it immediately with no animation. See the first section on api.jquery.com/hide/ for more details.
Hope this helps!
#1 How can it be duration? Is there something I don't know?
"#1" isn't a valid value for the duration, it is usually the string "slow" or a number in milliseconds. Passing in the invalid string was causing it to have animation, which was an unintended consequence. I'm guessing that passing in any string value will cause the animation to have the default duration.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.