높이에서 div 애니메이션 : 첫 번째 클릭시 자동 실패 0px

블록 요소를 0px에서 auto로 애니메이션하려고합니다. 그러나 첫 번째 클릭시 자동 높이에서 즉시 표시됩니다. 첫 번째 클릭 후 시각적으로 보이지 않게 부드럽게 움직입니다.높이에서 div 애니메이션 : 첫 번째 클릭시 자동 실패 0px

CSS :

.item .comments { 
    display: none; 
    overflow: hidden; 
    background: #f7f8fb; 
    padding: 0 10px; 
    margin: 0; 
}

JS :

$(document).on('click', '.btn-comment', function(){ 

    var comments = $(this).closest('.item').find('.comments'); 

    if (!comments.is(':visible')) { 
     comments.show().velocity({ 
      height: comments.get(0).scrollHeight 
     }, 250, function(){ 
      $(this).height('auto'); 
     }, 'ease'); 
    } else { 
     comments.velocity({ 
     height: 0 
     }, 250, function(){ 
     $(this).hide(); 
     }, 'ease'); 
    } 

});

출처

2016-07-04 frosty

높이()는 픽셀 값을 취하므로 자동 기능이 작동하지 않을 수 있습니다. css()를 사용하여 시도하십시오 - http://api.jquery.com/height/ – Tasos

의사가 말한 이유가 잘못되었을 수 있습니다. - 높이 (value)를 호출 할 때 값은 문자열 (숫자 및 단위) 또는 숫자. 값에 숫자 만 제공된 경우 jQuery는 픽셀 단위로 가정합니다. 그러나 문자열이 제공되면 높이 (예 : 100 픽셀, 50 퍼센트 또는 자동)에 유효한 CSS 측정이 제공되어야합니다. 최신 브라우저에서는 CSS 높이 속성에 패딩, 테두리 또는 여백이 포함되지 않습니다. – Tasos

$ (this) .height ('auto'); - 클릭 한 버튼입니다 == $ (comments) .height ('auto'); – Tasos

는 다음과 같이 slideToggle()을 사용해보십시오 : 당신은 그냥 입력 잊어 버린 것처럼

$(this).closest('.item').find('.comments').slideToggle();

출처

2016-07-04 01:10:38 Lifz

'.slideToggle()'에 대해 전혀 모른다 ... 고마워. – frosty

이 보이는

height: 0;

이렇게하면 처음에는 auto로 설정됩니다. 내가 jQuery를 생각

출처

2016-07-04 01:15:11

그래서 나는 당신을 위해 하나, https://jsfiddle.net/moongod101/zobbvm79/ 내가 JS에 새로운 해요, 나는 애니메이션 당신이 CSS에게 줄 수 있다고 생각하고, addClass 및 removeClass는 IS를 만든을 클릭 전환 할 수 있습니다 이러한 함수가 아닙니다 이 동작의 요점

출처

2016-07-04 02:52:22

높이에서 div 애니메이션 : 첫 번째 클릭시 자동 실패 0px

답변

관련 문제