Question

我正在向我的网站添加随机背景图片。我在页面的左下方放了一个摄像头图标，当用户将鼠标悬停在图标上时，它会隐藏我页面上的其他内容，以便您查看背景图像。问题是，当我调用jQuery fadeOut函数时，它会丢失垂直滚动条，然后调整我的图像大小以在屏幕的那一部分上拉伸。它看起来像一个小故障，但我知道这是因为我在fadeOut函数调用期间丢失了垂直滚动条。

对fadeOut有类似的调用会隐藏我的内容，但不会丢失滚动条吗？我知道我可以将滚动条设置为始终在我的屏幕上，但我不希望看到因为我的某些页面不需要它。

谢谢！

Answer 1

jQuery $.fadeOut淡化元素的不透明度，然后在完成时将其设置为display: none;。这会导致元素与滚动条一起消失。

相反，您可以使用$.animate：

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

隐藏元素，然后：

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

再次展示。

使用它不会弄乱布局，只是透明度。

Here's a JSFiddle demo显示故障。

And here's one效果更好。

Answer 2

而不是使用淡出，请使用fadeto

.fadeTo( "slow", 0 );

https://api.jquery.com/fadeTo/

Answer 3

fadeOut函数在动画结尾处添加display：none。您可以手动执行淡入淡出动画：

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

您还可以在动画结束时添加回调，例如，提供可见性：隐藏; （与display：none不同。

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

Answer 4

在淡出剩余的项目之前，添加一个相同大小的空白div？

是否可以让fadeOut保持元素的高度？

4 个答案: