jquery slideToggle() 및 알 수없는 키?

Question

임 JQuery와 1.3.2을 사용하여이 코드입니다 :

<script type="text/javascript"> 
    //<![CDATA[ 
    jQuery(function(){ 
     jQuery('.news_bullet a.show_preview').click(function() { 
      jQuery(this).siblings('div').slideToggle('slow'); 
      return false; 
     }).toggle(
     function() { 
      jQuery(this).css({ 'background-position' : '0 -18px' }); 
     }, 
     function() { 
      jQuery(this).css({ 'background-position' : '0 0' }); 
     }); 
    }); 
    //]]> 
</script> 

당신이 here를 참조하면 난 당신이 텍스트를 클릭 작은 녹색 +의 무리가 공개되며, 배경 위치가 해당 링크에 대한 변경이 너무 그러면 이미지의 다른 부분 인 빨간색을 보여줍니다.

그래서 내가 갖고있는 문제는 그 숨겨진 요소의 높이를 모른다는 것입니다. 왜냐하면 그것은 얼마나 많은 텍스트가 있는지에 달려 있기 때문에 +를 클릭하여 보여 주면 애니메이션이 '점핑'됩니다.

내가 발견 한 해결 방법은 고정 된 높이와 오버플로 : 숨겨진 요소에 숨겨져 있습니다. 맨 왼쪽 블록 (맨 위에 'Vesti iz sveta crtanog filma'가있는 것)에서 얼마나 더 부드러운 애니메이션이 실행되는지 확인할 수 있습니다. 다른 모든 블록에는 높이가 고정되어 있지 않으며 애니메이션에는 '점프'가 있습니다. Atm은 왼쪽 상단 블록의 고정 높이가 30px이지만 일부 요소는 더 많은 높이가 필요하고 일부는 덜 필요하므로 좋은 해결책이 아닙니다. :)

그래서이 애니메이션을 '점핑'에서 멈출 때 고정 된 높이가 없습니까?

Answer 1

당신은 그들에게이이 동작 중단됩니다 CSS에 폭주는 경우

.news_bullet .hide { width: 272px; } 

심지어 jQuery로 : 이들의

jQuery(".news_bullet .hide").width(272); 

중 하나를 옵션은 튀어 오른 슬라이드를 멈출 것입니다 :)

Answer 2

프로 그레시브 향상의 실무자로서, 나는 먼저 자바 스크립트가 비활성화 된 텍스트를 숨기지 말라고 말할 것입니다.

페이지로드시 : 요소의 높이를 var에 저장 한 다음 높이를 설정하여 지금처럼 텍스트의 추가 줄을 숨 깁니다. 그 var를 사용하여 토글에서 움직이는 높이를 설정하면 괜찮을 것입니다.

여기

코드 예제 : http://www.pewpewlaser.com/articles/jquery-smooth-animation