jQuery SlideDown 및 Float 사용

아래로 슬라이딩 할 객체의 내용이 떠있을 때 jQuery slideDown에 문제가 있습니다.jQuery SlideDown 및 Float 사용

div의 내용이 내용의 높이를 지나서 내려 가고 적절한 높이로 '고정'됩니다.

내면의 내용이 부풀어 오지 않으면 높이를 기준으로 div가 아래로 내리고 있다고 생각합니다 (이론 만). 예를 들어 4 개의 부동 항목이있는 경우 div는 내에서 2 개의 부동 항목을 가질 때보 다 두 배 확장됩니다.

clearfix 해킹이있는 수레가 들어 있지 않으면 아무 것도 수정하지 못하는 것 같습니다.

과거에 사용했던 해결책 (및 권장 사항)은 숨기기 전에 CSS를 통해 항목의 높이를 설정하는 것입니다. 그런 식으로, 미끄러진다.

캐치는 슬라이드를 사용하는 패널을 중첩한다는 의미입니다. 이미 확장 된 중첩 된 숨겨진 패널을 기반으로 계산되므로 부모의 높이를 직접 설정할 수는 없습니다.

필자는 모든 토글 패널을 설정하는 함수를 재귀 적으로 호출 할 수 있습니다. 가장 안쪽으로 중첩 된 패널을 찾고, 높이를 설정하고, 기본적으로 숨김을 원하는 항목을 축소 한 다음 계층을 위로 이동합니다. 그러나 그렇게 많이 지나쳐야하는 성과가 될 것입니다.

누구든지이 슬라이드를 고정하기 전에 CSS를 통해 높이를 고정하지 않고 수동으로 dom 설정 높이를 수동으로 탐색하지 않고도 해결할 수 있습니다.

UPDATE :

샘플 코드가 여기에 있습니다 :

는

http://jsbin.com/ajoka/10/

이것은 내가 사용하고 정확한 스타일을 그 기반으로 (이 슬라이딩 볼 수있는 페이지를 클릭) 특정 조합을 선택하면 문제가 표시됩니다. slideDown으로 설정된 DIV가 분홍색 배경임을 유의하십시오. 내용물보다 더 아래로 미끄러 져 들어가서 신속하게 적절한 위치로 다시 되돌아갑니다.

출처

2010-06-18 DA.

문제를 재현 할 수 없습니다. 몇 가지 코드를 입력하십시오.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
    <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="assets/js/application.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="test"> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    </div> 
</body> 
</html>

CSS

#test div { width: 200px; height: 200px; float: left; outline: 1px solid #000; }

JS 해결

$(function(){ 
    $('#test').hide(); 
    $(window).click(function(){ 
    $('#test').slideDown(); 
    }); 
});

출처

2010-06-18 17:36:07

흠 ... 네 말이 맞아! 내가 잃어버린 또 다른 변수가 있어야합니다 ... 나는 파기를 계속 할 것입니다 –

@Fred ... 나는 모든 종류의 변이를 시도했지만 처음부터 그것을 복제 할 수 없었습니다. 마지막으로 문제 사이트 요소를 축 어적으로 복사 한 다음 문제가 다시 발생했습니다. 그래서 제 CSS의 이상한 콤보입니다. 원본 게시물에 샘플 링크를 추가했습니다. –

는 Y에서 margin-bottom:10px; 제거를 이 예상대로 작동 우리 갑자기 기억이 게시물을 읽는 것은 이미이 문제 년전

난 그냥 같은 문제를 건너 왔어요

.itemsWrapper { 
    margin-bottom:10px; 
    overflow:auto; 
    width:100%; 
    background: green; 
    }

http://jsbin.com/ajoka/11

출처

2010-06-19 02:37:41 Starx

데모가 수정되었습니다! 아아, 특정 마크 업이 아닙니다. 응. 너무 많은 요인! 제 경우에는 플로팅 된 항목에서 'positon : relative'를 제거하면 문제가 해결된다는 것을 발견했습니다. 문제는 특정 경우에 상대적인 위치에 있어야한다는 것입니다 (내용이 절대적으로 배치되는 경우). 테스트 보드로 돌아 가기 ... –

@ Da, 왜 전체 코드를 게시하지 않습니까? – Starx

하고있다.

다음은 최적은 아니지만 대부분의 상황에서 작업이 완료되는 해결책입니다.

래퍼에 padding-bottom: 1px;을 추가하십시오. 필자의 경우 래퍼는 애니메이션 div의 부모입니다.

희망이 있습니다.

출처

2011-10-22 10:04:31 jmlnik

나는 또한 동일한 문제에 직면했다. 두 개의 파일이 동일한 HTML 코드를 가지고 있지만 그 중 하나가이 문제를 보여줍니다. 용액으로서 I JQuery와 함께 슬라이딩 된 DIV 높이 계산치 :

var somevar=$('#contentBody').outerHeight();

그럼 I 변수에 저장을하고, 다시 DIV slideDown 효과를 적용하기 전에 적용 하였다 :

$('#contentBody').height(somevar);을

이 트릭으로 문제가 해결되었습니다.

출처

2012-10-17 19:55:46

jQuery SlideDown 및 Float 사용

답변

관련 문제