CSS에서 고정 높이가 아닌 실행이 완료되기 전에 jquery의 slideToggle()의 최종 높이를 가져옵니다.

Question

div A의 런타임 변경 높이에 따라 동적으로 업데이트하려면 내 웹 사이트에 div B이 필요합니다. div A은 div A 내부의 여러 div에있는 slideToggle() jquery를 사용하지만 div B은 현재 높이가 div A과 일치하도록 (동시에) 변경해야합니다. panel_toggle1 및 panel1이 div A 내부에 포함되어 있습니다 :

$(document).ready(function() { 
    $("#panel_toggle1").click(function() { 
     $("#panel1").slideToggle("slow", function() { 
      var divAheight = $("#divA").height(); 
      $("#divB").animate({ height: divAheight }, "slow"); 
     }); 
    }); 
}); 

위의 코드는 slideToggle() 다른 사업부의 슬라이드 효과를 수행하기 전에 완료를 기다립니다 인해 callback()에, 그러나, 비열하게 내가 원하는 것을 수행 (I이었다 sliteToggle()은 완료 될 때까지 height()이 div A이 아니므로이 작업을 수행해야합니다.

div A과 div B이 동시에 부드럽게 업데이트되도록하려면이 방법이 있습니까? 즉 높이가 slideToggle() (난 그냥 div Bdiv A에 같은 시간에 .animate()를 호출 할 수 있도록)이 끝난 div A 전에 업데이트됩니다 얻을 수있는 방법이 있나요?

참고 : 나는 div A 년대에 맞게 내가 div B을 유지할 수있는 방법이 대안으로

가 간단하게하고 싶은 나는 CSS에있는 div의 고정 높이를 사용하지 않는 그냥 CSS로 높이?

Answer 1

divA의 고정 목표 높이를 설정할 수 있다면 솔루션은 간단 할 것입니다. 예를 들어, 동시에 실행되도록 애니메이션을 설정하면됩니다. queue=false을 설정하십시오.

여기

var $divB = $("#divB"); 
$divB.animate({ 
    height: '600px' // some arbitrary height approaching target height 
}, { duration: 5000 /* longer than the next animation */, queue: false }); 
$("#panel1").slideToggle({ 
    duration: 'slow', 
    queue: false, 
    complete: function() { 
     var divAheight = $("#divA").height(); 
     // stop the animation and begin another with the correct target height 
     $divB.stop().animate({ height: divAheight }, "slow"); 
    } 
}); 

, 모두 div의가 시작 : 원래 애니메이션의 결과로 높이를 모른 채 동시에 이러한 애니메이션을 실행하려는 것처럼 보인다 때문에

는 해결 방법은 효과를 acheive 두 애니메이션을 사용하는 것입니다 동시에 움직이십시오. slideToggle 애니메이션이 완료되면 divB의 높이 애니메이션이 중지되고 divB = height의 새 높이 애니메이션이 시작됩니다. 좀 이상 하긴하지만 업데이트 된 높이를 얻으려면 첫 번째 애니메이션이 완료 될 때까지 기다려야합니다. 그러나 그것으로 관리하는 것은 쉽지 않다,

var newHeight = $("#divA").height() - $("#panel1").height(); 
var $divB = $("#divB"); 
$divB.animate({ 
    height: newHeight + 'px' 
}, { duration: 'slow', queue: false }); 
$("#panel1").slideToggle({ 
    duration: 'slow', 
    queue: false 
});