디스플레이 없음없이 jQuery 페이드 아웃?

디스플레이 없음없이 jQuery 페이드 아웃?

---

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

---

당신이 사용할 수있는 .animate()온 opacity직송 :

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

이렇게하면 요소가 원하는대로 여전히 공간을 차지하고 0불투명도를 가지므로 끝날 때 와 사실상 동일 visibility: hidden합니다.

---

예, 대안이 있습니다. 그것은.fadeTo() 당신의 경우에 될 대상 불투명도를 설정하는 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);
}

---

fadeOut 을 원 하고 내용을 변경 한 다음 다시 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

});

---

참고

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

(이상하게) 호환되지 않습니다

fadeIn()

(다시 보여주고 싶을 때). 따라서 사용하는 경우

fadeTo(500, 0)

CSS없이 무언가를 숨기려면 display: none다음을 사용해야합니다.

fadeTo(500, 1)

페이드 인하 지 않으면 opacity: 0CSS에 남아 있고 보이지 않게 유지됩니다.

참고 URL : https://stackoverflow.com/questions/4549389/jquery-fadeout-without-display-none