jQuery fadeOut 표시하지 않고 없음?

Question

fadeOut() 대신 display : none 스타일을 사용하지 않는 대안이 있습니까? 나는 페이지 레이아웃에서 어떤 종류의 이동을 피하기 위해 숨겨진 가시성을 사용하고 싶습니다. 당신은 직접 opacity에 .animate()을 사용할 수 있습니다

Answer 1

:

$(".selector").animate({ opacity: 0 }) 

당신이 원하는 같은 요소가 여전히 공간을 차지이 방법은, 그냥 0 투명도를 가지고, 그래서 그것이 visibility: hidden 때 인 것과 같은 효과적으로입니다 그것은 끝납니다.

Answer 2

사용자 정의 애니메이션 예, 대안 거기에 대안 http://api.jquery.com/animate/

.animate({opacity: 0.0}, 5000, 'linear', callback); 

Answer 3

입니다. It's called .fadeTo(), 대상 불투명도를 설정합니다.이 경우에는 0이됩니다.

$('element').fadeTo(1000, 0); // fade to "0" with a 1000ms duration 

이렇게하면 끝에 display 속성이 변경되지 않습니다.

Answer 4

이 일을하는 한 가지 방법은 다시 사용했던 다음 디스플레이 모드, .fadeOut을 캡처하고 전체에 숨어의 선호하는 방법을 수행하고 디스플레이를 설정하는 것입니다

:

var $element = $('#selector'); 

var display = $element.css('display'); 
$element.fadeOut(500, function() { 
    $element.css('visibility', 'hidden'); 
    $element.css('display', display); 
} 

Answer 5

주

fadeTo(500, 0) // fade out over half a second 
fadeTo(0, 0)  // instantly hide 

는

fadeIn() 

(당신이 다시 표시 할 때)와 호환되지 않습니다 (이상한)이다. 그래서 만약 당신이 다음에 다시 페이드

fadeTo(500, 1)

를 사용해야하거나 여전히 opacity: 0이 남아있을 것입니다 CSS를 display: none없이 뭔가를 숨기기 위해

fadeTo(500, 0)

를 사용하는 경우 그리고 css에서 보이지 않는 채로 남아있을 것입니다. 당신이 페이드 아웃 원하는

Answer 6

난 후, 다음 fadeIn 콘텐츠를 다시 변경 :

$("#layer").animate({opacity: 0}, 1000, 'linear', function(){ 

    //Do here any changes to the content (text, colors, etc.) 
    $("#layer").css('background-color','red'); //For example 

    $("#layer").animate({opacity: 1}); //FadeIn again 

});