[jQuery] :visible 조건

[jQuery] :visible 조건

Q. $('.box').is(':visible') 실행되지 않을까?

먼저 코드를 보자.

<button type="button">click</button>
<div class="box"></div>

.box {
  display: block;
  width: 200px; height: 200px;
  background-color: green;
  /* 숨겨준다. */
  opacity: 0;
  visibility: visible;
}

$('button').on('click', function() {
  if(!$('.box').is(':visible')) {
    // box visible.
    $('.box').css({opacity: 1, visibility: 'visible'});
  } else {
    // box hidden.
    $('.box').css({opacity: 0, visibility: 'hidden'});
  }
});

위의 코드를 실행해보면 실행되지 않는다.

1. jQuery visible를 보자.

   jQuery(':visible') :: 보이는 모든 요소를 선택한다.

   보이는 요소는 너비또는 높이가 0보다 크다.

   반대 개념인 :hidden은 공간 소비가 없으며 표시가 되지 않는다.

   → display: none은 성립.

   즉, visibility: hidden / opacity: 0은 공간을 차지한다.

    

   visibility=hidden , opacity: 0 은 display: none과 다르다.

   • visibility: hidden / opacity: 0

     • 태그는 보이지 않지만, 하나의 공간을 차지하고 있다

   • display: none

     • 해당 태그가 페이지에 전혀 표시되지 않는다

이전글 보기 2020/03/31 - [👩🏻‍💻STUDY/CSS] - [CSS] opacity / visibility / display 차이점

 

1. 요소가 문서에서 공간을 소비하면 표시되는 것으로 간주한다.

2. is(':visible') 를 보자.

   visible === true :: 공간을 차지.

   visible === false :: 공간을 차지하지 않음.

   => false조건 만족해야 하는데 공간이 있는 visibility: hidden / opacity: 0은 조건성립이 되지 못한다.

 

[▼예제 :: display: none / visibility: hidden / opacity: 0]

 

1과 2는 pointed out되었다. (anchor focus가 잡히지 않음.) 하지만 2는 여전히 공간을 가지고 있다.

3은 공간도 가지고 있고 click도 가능하다.

 

해결방법

1. css 속성을 가져와서 쓴다.

.box {
  width: 200px; height: 200px;
  opacity: 0;
  visibility: hidden;
}

if($('.box').css('visibility') === 'visible') {
  $('.box').animate({opacity: 1}, 500).css({visibility: 'visible'});
} else {
  $('.box').animate({opacity: 0}, 500).css({visibility: 'hidden'});
  // opacity가 animate 되지 않고 바로 hidden 된다.
  // fadeIn(), fadeOut() 이벤트처럼 발생되지 않는다.
}

• fadeIn() / fadeOut() 이벤트처럼 해주려면,

.box {
  width: 200px; height: 200px; background-color: green;
  opacity: 0; visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 0.5s, 0s;
  transition-delay: 0s, 0.5s;
}
.box.on {
  opacity: 1; visibility: visible;
  transition-property: visibility, opacity;
  transition-duration: 0s, 0.5s;
}

if($('.box').css('visibility') === 'visible') {
  $('.box').removeClass('on');
} else {
  $('.box').addClass('on');
}

 

 

2. 요소에 inline / inline-block / block 을 만들어준다.

.box {
  display: none;
  width: 200px; height: 200px;
  background-color: green;
}

if(!$('.box').is(':visible')) {
  $('.box').css({display: 'block'});
  // $('.box').show();
  // $('.box').fadeIn();
} else {
  $('.box').css({display: 'none'});
  // $('.box').hide();
  // $('.box').fadeOut();
}

 

---

 

출처

jQuery .is(":visible") not working in Chrome

jQuery:visible Selector

jQuery is(:visible) for visibility: hidden

what is the difference between visibility: hidden and display: none?

transitions on the CSS display property