fadeOut이 요소의 높이를 유지하도록 할 수 있습니까?

Question

내 사이트에 임의의 배경 이미지를 추가하고 있습니다. 내 페이지의 왼쪽 하단에 카메라 아이콘을 넣고 사용자가 아이콘 위로 마우스를 가져 가면 내 페이지의 모든 것을 숨겨서 배경 이미지를 볼 수 있습니다. 문제는 jQuery fadeOut 함수를 호출 할 때 세로 스크롤 막대가 손실 된 다음 화면의 해당 부분을 가로 질러 이미지가 늘어나도록 크기가 조절된다는 것입니다. 그것은 글리치처럼 보이지만, 내 fadeOut 함수 호출 중에 내 세로 스크롤 막대를 잃어 버렸기 때문에 그 사실을 알고 있습니다.

내 콘텐츠를 숨기지 만 스크롤바를 잃지 않는 fadeOut과 비슷한 호출이 있습니까? 항상 화면에 스크롤바를 놓을 수는 있지만, 필자의 페이지 중 일부는 필요하지 않으므로 보는 것을 원하지는 않는다.

감사합니다.

Answer 1

jQuery $.fadeOut은 요소의 불투명도를 페이드 아웃 한 다음 완료되면 display: none;으로 설정합니다. 이로 인해 요소가 스크롤 막대와 함께 사라집니다.

대신 $.animate를 사용할 수 있습니다

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

이 다시 표시하려면

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

다음 요소를 숨 깁니다.

이것을 사용하면 레이아웃이 엉망이되어 투명성이 떨어집니다.

Here's a JSFiddle demo 글리치를 나타내는.

And here's one 잘 작동합니다. 애니메이션의 끝에 것도 대신 페이드를 사용

Answer 2

나머지 항목이 사라지기 전에 동일한 크기의 빈 div를 추가 하시겠습니까?

Answer 3

는 fadeto

.fadeTo("slow", 0); 

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

Answer 4

페이드 아웃 기능은 디스플레이를 추가하지 사용.

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

는 또한, 예를 들어, 애니메이션의 마지막에 콜백을 추가 할 수있는 가시성을 제공하기 위해 : 수동으로 페이드 애니메이션 할 수있는 숨겨진을; (.?를 그 표시 동일하지 않습니다 : 없음

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