jQuery의 저속한 애니메이션 문제

필자는이 문제를 여러 번 시도했지만 아무런 문제가 없는데 Here에 문제가 있습니다. 슬라이드가 정상적으로 작동하고 (갑자기 갑자기 움직이는 것보다) 애니메이션이 끝납니다. 위로 미끄러 져서 잘 작동합니다. 이것은 slideDown(), slideToggle 및 .animate()의 경우입니다. 이상하게도 애니메이션 기능에서 불투명도를 토글하는 경우 이상하지 않지만 내 텍스트는 잠시 컬러를 변경합니다.jQuery의 저속한 애니메이션 문제

HTML :

<h2>Phthalate Free: </h2><div class="yamikowebsToggler"> 
    <p> 
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products. 
    </p></div>

CSS : 나는 다른 읽을 마진이 어색함하지만 도움이 밤은을 일으킬 수 있었다

h2{color:#76DEFC; margin:0px;} 
    .yamikowebsToggler{margin:0px;} 
    p{margin:0px; color;#000000;}

JQUERY :

$(document).ready(function(){ 
    $(".yamikowebsToggler").fadeOut(0); 
    $("h2").click(function() 
    { 
     $(this).next(".yamikowebsToggler").stop(true, true).animate(
     { height: 'toggle' }, 
     { 
      duration: 1000, 
     }); 
    }) 
});

출처

2011-03-20 user654994

문제가 보이지 않습니다. http://jsfiddle.net/azjUT/ 아, 그냥 링크를 발견 했으므로 거기에 문제가 있습니다. 나는이 코드가 혼자 사용될 때 어떤 문제도 없기 때문에 다른 CSS와의 교차점이되어야한다고 생각한다. – tvanfosson

didnt fix it = 답글 tvanfosson에 대한 – user654994

해결책을 찾았습니다. 그것은 내 코드와 관련이 없지만 jquery의 버그입니다. jquery가 상속 된 경우 높이를 가져 오는 데 문제가 있습니다. 높이를 가져올 때 요소가 숨겨져 있기 때문입니다. 요소가 숨겨져있는 경우가이 문제를 해결하기 위해

position: absolute; 
visibility: hidden;

의 CSS 속성으로 치료 당신은 내가 전환되는 많은이 있기 때문에 내 경우에는 행할 수없는 애니메이션 중 하나에서 높이를 지정해야합니다. 다른 방법으로 높이를 요소에 설정하는 것입니다. 나는 그것에 대해 내 jQuery에 개인적으로 메모를 추가하고 모든 요소를 토글하여

style="height: <height in px>;"

을 토글합니다.

출처

2011-03-21 03:46:30 user654994

평균 가시성 : 숨김? – Asaf

당신이 증가 시도 가지고 당신의 {duration: ...}? 또한 내장 된 jQuery 함수 .slideToggle()을 사용할 수도 있습니다.

출처

2011-03-20 02:42:08 mattsven

thx. 불행히도 내 모든 외부 CSS를 사용하지 않으면 문제가 지속됩니다. motionman95 read desription completly. 문제는 slideToggle 및 slideDown과 동일합니다 .Duration은 문제가 없습니다. – user654994

답변으로 표시되어 있지만이 문제에 대한 업데이트를 제공하고자합니다. 이 핵심 개발자들에 의해 폐쇄 됐어요 그러나 http://bugs.jquery.com/ticket/4541

및 성능에 결함이없는 패치가 아니라면이 고정되지 않습니다 것 같다 :

대응 문제 티켓

는 여기에있다.

동시에 jQuery를 사용하여이 작업을 수행하려는 경우 slideUp 또는 slideDown하려는 요소의 높이 또는 너비를 설정할 수 있습니다. 그것은 "픽셀"단위 일 필요는 없으며 백분율로 표시 될 수도 있습니다.

출처

2011-10-05 06:14:45 garyc40

100 %에서 0 % 너비로 나누기 애니메이션을 적용 할 때 비슷한 문제가 발생했습니다.

애니메이션의 시작 부분에서 어떤 이유로 인해 부서가 110 %를 좋아하는 것으로 나타났습니다.

어쨌든 해결책은 특정 부문의 CSS 스타일에 max-width: 100%;을 추가하는 것이 었습니다.

내가이 문제에 대한 해결책을 찾기 위해 여기에 올 때 여기에 게시 할 것이라고 생각했습니다. :)

출처

2012-05-18 11:59:25 diggersworld

jQuery의 저속한 애니메이션 문제

답변

관련 문제