기본 jQuery slideUp 및 slideDown driving me mad!

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

문제

내 jQuery 술은 매우 좋은 일반적으로하지만 이것은 운전 me mad!

그것은 아주 간단한 아코디언 나는 코드에서 처음.용 jQuery1.3.2 그래서가 있어야 하지 않는 어떤 점프 버그를 가지고 있지만 기본적으로하는 경우 당신은 살펴를 들어:

http://www.mizudesign.com/jquery/accordian/basic.html

나를 표시하 고도에 대한 대상 div 에 오른 경우 텍스트가 포함되어 생각보다 짧은 그것은 그리고 점프.는 경우에 그것의 이미지가 아무 문제 없습니다.

를 알아낼 수 없습니다 내가 잘못된 것-그것은 분명히 CSS 하지만 어딘가에 나는 모든 일반적인 용의자는 다음과 같 display:block

어떤 아이디어를 것 기꺼이 받았습니다!

당신 Chris

PS 용서해 주시는 자연의 소스 코드,나는 그것을 밖으로 찢어 전체 프로젝트에서 일하고 있어요 그래서 그 일부를 포함 div 는 정말 필요하지 않습니다.

도움이 되었습니까?

해결책

부드럽게 애니메이션하려면 내용의 너비 또는 높이가 필요합니다.

다른 팁

나는 지금 내 자신의 동적 솔루션을 찾았다는 것을 인정해야합니다.

http://www.mizudesign.com/jquery/accordian/basic.html 고정해야합니다.

실제로는 매우 간단합니다. DIV를 숨기기 전에 .CSS를 사용하여 높이를 추가합니다. 치료 :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

문제는 패딩이나 마진이 추가되면 점프 할 때 이것이 사실이라고 생각합니다. 콜백에서 마진을 애니메이션해야합니다

또한 테이블이 슬라이드 타운 슬라이드 업으로 버기를 행동하고 오히려 Fadein Fadeout을 사용한다는 "명심하십시오"

DIV가 콜백에서 애니메이션을 마치면 높이를 얻으십시오. DIV가 애니메이션을받는 동안 높이를 얻을 수 있으며 과도기적 가치를 얻을 수 있습니다.

애니메이션이 Jumpy이면 콜백을 사용해보십시오. div를 열지 않고 동시에 div를 숨기지 마십시오. 대신, 첫 번째 div를 숨기고 콜백 쇼 내에서 다음 div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

업데이트 (주석에서) :

붉은 광장: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

나는 또한 성가신 것을 가졌다 slideUp() Safari에서 발생했지만 Chrome 또는 IE가 아닌 점프 문제. 내가 숨기거나 보여준 DIV 태그가 포함 된 다른 div 태그 바로 아래에 있음이 밝혀졌습니다. float:left divs. 미끄러 져 들어가는 동안, 부유 식 Divs는 순간적으로 다시 렌더링되어 점프를 일으킨다.

수정 사항은 단순히 추가되었습니다 clear:both 숨어/보여주는 스타일로 Div.

나의 문제이기 때문에 나는 그야 반응형 디자인 내가 무엇인지 몰라 너비나 높이의 요소가 될 것입니다.을 읽은 후 이 블로그 게시물 http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm 는 것을 깨달았 jQuery 었의 위치를 변경하는 제 요소를 고정하고 장난의 레이아웃 요소입니다.나에 추가하려면 다음을 내 CSS 위해 요소를 통보하지 않았다 어떤 나쁜 부작용에 IE7+,firefox,chrome,safari.

display: none;  
overflow: hidden;
position: relative !important;

마진 탑 및 마진 바닥 값을 패딩 탑 및 패딩 바닥 값으로 바꾸는 것은 저에게 트릭을 만들었습니다. 다음 후 여백 값을 0으로 설정하는 것을 잊지 마십시오.

이것은 나를 위해 효과가있었습니다.

$(this).pathtoslidingelementhere.width($(this).parent().width());

문제는 IE (Quirks Mode)가 "높이 : 0px"를 렌더링하려고하는 것입니다.

수정 : 높이가 1 (0이 아님)으로 애니메이션 한 다음 높이를 숨기고 재설정합니다.

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

저에게있어 문제는 슬라이드로 표시/숨기기위한 DIV의 마진 (또는 패딩) 이었지만 해당 DIV에 여백 (또는 패딩)을 제공해야했습니다. 나는이 트릭으로 해결했다 :

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top