jQuery 페이드 디스플레이 없이 꺼집니까?

jQuery 페이드 디스플레이 없이 꺼집니까?

스타일에 display:none을 사용하지 않는 fadeOut()의 대안이 있습니까?페이지 레이아웃이 변경되지 않도록 가시성을 숨긴 채로 사용하고 싶습니다.

를 사용할 수 있습니다.opacity직접:

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

이런 식으로 원소는 여전히 당신이 원하는 것처럼 공간을 차지하고, 그것은 단지0불투명도가 있는 것과 마찬가지입니다.visibility: hidden끝날 때쯤에

네, 대안이 있습니다.라고 불리는데, 목표 불투명도를 설정하면, 당신의 경우에는0.

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

이것은 변경되지 않을 것입니다.display종착지

사용자 지정 애니메이션이 대안입니다. http://api.jquery.com/animate/

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

이렇게 하는 한 가지 방법은 디스플레이 모드를 캡처한 다음 .fadeOut한 다음 전체에서 원하는 숨기기 방법을 수행하고 디스플레이를 원래 상태로 다시 설정하는 것입니다.

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

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

페이드아웃을 선택한 다음 내용을 변경한 다음 페이드인을 다시 선택합니다.

$("#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

});

참고:

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

(oddly) 와 호환되지 않습니다.

fadeIn()

(다시 보여주고 싶을 때)그래서 만약 당신이 사용한다면.

fadeTo(500, 0)

CSS 없이 무언가를 감추기 위해display: none그럼 당신은 사용해야 합니다.

fadeTo(500, 1)

그것을 다시 집어넣지 않으면 그것은 여전히 남아있을 것입니다.opacity: 0CSS에 남겨져서 보이지 않는 상태로 남아있을 겁니다

언급URL : https://stackoverflow.com/questions/4549389/jquery-fadeout-without-display-none