반응형
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: 0
CSS에 남겨져서 보이지 않는 상태로 남아있을 겁니다
언급URL : https://stackoverflow.com/questions/4549389/jquery-fadeout-without-display-none
반응형
'programing' 카테고리의 다른 글
WordPress 서버에서 논스 토큰을 새로 고치지 않음 (0) | 2023.10.04 |
---|---|
Wordpress와 Spring MVC의 통합 (0) | 2023.10.04 |
파이썬에서 for 루프에서 리스트 요소를 제거하는 방법? (0) | 2023.10.04 |
키워드 인수 end= ' ' '로 인쇄할 때 구문 오류가 발생합니다. (0) | 2023.09.24 |
BTREE의 장점? (0) | 2023.09.24 |