페이지 레이아웃을 변경하지 않고 요소 페이드 인 / 아웃

페이지 레이아웃을 변경하지 않고 요소 페이드 인 / 아웃

---

정상적인 동작을 사용하는 경우 fadeIn와 fadeOut사용하는 것입니다 속성을 . 그러나 이것은 페이지의 레이아웃을 변경합니다.display

어떻게 할 수 fadeIn및 fadeOut페이지 레이아웃을 수정하지?

---

또한

.fadeIn()당신 대신 할 수 .animate({opacity:1})
있고 당신 대신 .fadeOut()할 수 있습니다.animate({opacity:0})

---

이것을 시도해 볼 수 있습니다 fadeOut.

$("something here").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

... 그리고 이것은 fadeIn:

$("something here").hide().css({visibility: "visible"}).fadeIn("slow");

---

fadeTo 사용 :

이 .fadeTo()메서드는 일치하는 요소의 불투명도를 애니메이션합니다. .fadeIn()방법 과 비슷 하지만이 방법은 요소를 숨김 해제하고 항상 100 % 불투명도로 페이드합니다.

기간은 밀리 초 단위로 제공됩니다. 더 높은 값은 더 빠른 애니메이션이 아니라 더 느린 애니메이션을 나타냅니다. 문자열 'fast'과는 'slow'의 표시 기간에 공급 될 수 200및 600각각 밀리. 다른 문자열이 제공되면 기본 기간 인 400밀리 초가 사용됩니다. 다른 효과 방법과 달리 명시 적으로 지정 .fadeTo()해야 duration합니다.

제공된 경우 애니메이션이 완료되면 콜백이 시작됩니다.

---

아래의 10gler 솔루션 덕분에 보이지 않는 버튼 클릭 등을 방지하기 위해 가시성을 사용합니다.

//fadeIn
$("#x")
    .css('visibility', 'visible')
    .fadeTo('fast', 1);

//fadeOut
$("#x")
    .fadeTo('fast', 0, function() {
        $(this).css('visibility', 'hidden');
    });

---

위 답변의 조합을 사용하면 이것은 저에게 잘 맞았습니다. 원하는대로 애니메이션 시간을 변경할 수 있습니다.

받는 사람 fadeIn:

        $('selector').animate({opacity:1, visibility:'visible'}, 200);

받는 사람 fadeOut:

        $('selector').animate({opacity:0, visibility:'hidden'}, 200);

을 설정할 수 있는지 확인 visibilty:'hidden'하고 opacity:0, 그렇지 않으면 문제가 안 기본 디스플레이가 숨겨져있는 경우의 첫 번째 페이드에 갑자기 팝업을 방지하기 위해 시작.

        $('selector').css({opacity:0, visibility:'hidden'});

참고 URL : https://stackoverflow.com/questions/2256400/fading-elements-in-and-out-without-changing-the-layout-of-the-page