javascript - Is it possible to let fadeOut maintain the height of your element? - Stack Overflow

admin管理员组

文章数量:1287785

I'm adding random background images to my site. I put a camera icon in the lower left of my page, and when the user hovers over the icon it hides everything else on my page so you can view the background image. The problem is, when I call the jQuery fadeOut function, it loses the vertical scrollbar and then resizes my image to stretch across that part of the screen as well. It looks like a glitch, but I know it's because I lose my vertical scrollbar during my fadeOut function call.

Is there a similar call to fadeOut which will hide my content, but not lose the scrollbar? I know that I can set the scrollbar to always be on my screen, but I don't want that seeing as some of my pages don't need it.

Thanks!

I'm adding random background images to my site. I put a camera icon in the lower left of my page, and when the user hovers over the icon it hides everything else on my page so you can view the background image. The problem is, when I call the jQuery fadeOut function, it loses the vertical scrollbar and then resizes my image to stretch across that part of the screen as well. It looks like a glitch, but I know it's because I lose my vertical scrollbar during my fadeOut function call.

Is there a similar call to fadeOut which will hide my content, but not lose the scrollbar? I know that I can set the scrollbar to always be on my screen, but I don't want that seeing as some of my pages don't need it.

Thanks!

• javascript
• jquery
• html

Share Improve this question Follow asked Apr 15, 2014 at 18:19 jas7457jas7457 1,99155 gold badges3232 silver badges4747 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

jQuery $.fadeOut fades out the opacity on an element and then sets it to display: none; when it is finished. That causes the element to disappear along with it's scrollbar.

Instead, you can use $.animate:

$('#myEl').animate({opacity:0});

to hide the element and then:

$('#myEl').animate({opacity:1});

to show it again.

Using this will not mess with layout, just transparency.

Here's a JSFiddle demo showing the glitch.

And here's one that works better.

instead of using fadeout , use fadeto

.fadeTo( "slow", 0 );

https://api.jquery./fadeTo/

fadeOut function adds display:none at the end of the animation. You can do the fade animation manually:

element.animate({opacity: 0}, 'normal');

Also you can add a callback at the end of the animation, for example, to give visibility: hidden; (is not the same that display:none.

element.animate({opacity: 0}, 'normal', function(e){element.css('visibility', 'hidden');});

Add a blank div of the same size before you fade the rest of the items out?

本文标签： javascriptIs it possible to let fadeOut maintain the height of your elementStack Overflow