fadeOut () 및 slideUp () 동시에?

fadeOut () 및 slideUp () 동시에?

---

내가 발견 한 후 SlideUp 페이드 아웃 : jQuery를 하고 그것의 좋은,하지만 일이 아니다.

어떻게 할 수 fadeOut()와 slideUp()같은 시간에? setTimeout()동일한 지연으로 두 개의 개별 호출을 시도했지만 slideUp()페이지가로드 되 자마자 발생했습니다.

누구든지 이것을 했습니까?

---

다음과 같이 할 수 있습니다. 이것은 전체 토글 버전입니다.

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

페이드 아웃의 경우 :

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

---

높이에 직접 애니메이션을 적용하면 일부 웹 페이지에서 흔들리는 움직임이 발생합니다. 그러나 CSS 전환을 jQuery와 결합하면 slideUp()부드럽게 사라지는 행동을 할 수 있습니다.

const slideFade = (elem) => {
   const fade = { opacity: 0, transition: 'opacity 0.5s' };
   elem.css(fade).slideUp();
   }

slideFade($('#mySelector'));

코드로 바이올린 :
https://jsfiddle.net/00Lodcqf/435

어떤 상황에서는 더 많은 페이딩을 허용하기 위해 매우 빠른 100 밀리 초의 일시 중지가 약간 더 부드러운 경험을 만듭니다.

   elem.css(fade).delay(100).slideUp();

이것은 토글 및 콜백에 대한 추가 지원을보기 위해 함수에 대한 코드 ( github.com/dnajs/dna.js )를 볼 수있는 dna.js 프로젝트에서 사용한 솔루션 dna.ui.slideFade()입니다.

---

"Nick Craver"가 받아 들인 대답은 확실히 갈 길입니다. 내가 추가 할 유일한 것은 그의 대답이 실제로 "숨기기"가 아니라는 것입니다. 즉, DOM은 여전히 ​​표시 할 실행 가능한 요소로 인식합니다.

'slid'요소에 여백이나 패딩이있는 경우 문제가 될 수 있습니다. 여전히 표시됩니다. 그래서 애니메이션이 완료된 후 실제로 숨기기 위해 animate () 함수에 콜백을 추가했습니다.

$("#mySelector").animate({ 
   height: 0, 
   opacity: 0,
   margin: 0,
   padding: 0
}, 'slow', function(){
   $(this).hide();
});

---

다음과 같이 slideUp및 fadeOut메서드 자체를 사용하여이를 수행 할 수 있습니다.

$('#mydiv').slideUp(300, function(){
    console.log('Done!');
}).fadeOut({
    duration: 300,
    queue: false
});

---

비슷한 문제가 있었고 이렇게 수정했습니다.

$('#mydiv').animate({
            height: 0,
        }, {
            duration: 1000,
            complete: function(){$('#mydiv').css('display', 'none');}
        });
$('#mydiv').animate({
            opacity: 0,
        }, {
            duration: 1000,
            queue: false
        });

큐 속성은 애니메이션을 큐에 넣을 것인지 아니면 바로 재생할 것인지를 알려줍니다.

---

@CodeKoalas를 기반으로 한 가지 더 세분화를 던집니다. 세로 여백과 패딩을 설명하지만 가로는 설명하지 않습니다.

$('.selector').animate({
    opacity: 0,
    height: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
}, 'slow', function() {
    $(this).hide();
});

참고 URL : https://stackoverflow.com/questions/2387515/fadeout-and-slideup-at-the-same-time