DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
AndyBullet
AndyBullet

Posted on

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?

Top comments (4)

Collapse
 
ryansmith profile image
Ryan Smith • Edited on

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!

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Btw,

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

Collapse
 
ryansmith profile image
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.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Just use like that;

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

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post