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

github logo ・1 min read

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?

twitter logo DISCUSS (4)
markdown guide

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!



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

Classic DEV Post from Aug 2 '18

What are the basic courses/topics a software developer should learn to start their career?

An article to share with any aspiring dev with a bunch of resources to get started in the industry

AndyBullet profile image