JQuery: How do I remove the fly effect of .hide?

Hi guys! I have a thing to ask.
Do you know how to remove the effect of the .hide function of jquery that make the elements fly before disappearing?
Because in this code https://pastebin.com/ByFrsC9b I want that the first image disappears to make the second image take his place (as two slides), but the first image fly up before disappearing, and it mess up the scrolling.
Is there a way to remove this effect?

Comments

[Ryan Smith]

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.

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!

[Itachi Uchiha]

Btw,

#1 How can it be duration? Is there something I don't know?

[Ryan Smith]

"#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.

[Itachi Uchiha]

Just use like that;

$("#your-element").hide()