jQuery : CSS 및 클래스 애니메이션 변경

Question

jQuery에서 간단한 CSS와 클래스 변경이 있습니다. 텍스트 격자의 기본 그리드인데 모두 470px로 오버플로가 숨겨져 있고 'read more'를 클릭하면 클래스가 변경되고 div의 css, 내부에 포함 된 모든 텍스트를 표시하도록 높이를 확장하며, 간단한 Math.floor 함수를 사용하여 그리드와 항상 아래쪽에 정렬됩니다. 문제는 클래스와 CSS가 갑자기 변화하고 조금 어색해 보이는 것입니다. http://jsfiddle.net/neal_fletcher/fJcjE/
jQuery를 :
가 여기에 jsFiddle 데모의 '자세히보기'와 사업부 인해 CSS와 클래스 변경에 아래로 확장됩니다에

$(document).ready(function() { 
    var $container = $('#main-grid'); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.grid-block, .grid-block-long', 
      animationEngine: 'best-available', 
      masonry: { 
       columnWidth: 5 
      } 
     }); 
    }); 

    $('.grid-block-text p').hide().filter(":first-child").show(); 

    $('.read-more').click(function() { 
     var $this = $(this), 
      $parent = $this.parent('.grid-block'); 
     $this.hide(); 
     $this.nextAll('.grid-block-text') 
      .children('p').fadeIn('slow'); 
     $this.siblings('.read-less').fadeIn('slow'); 
     $parent.css('height','auto'); 
     var newHeight = $parent.height(); 
     newHeight = (Math.floor((newHeight+29)/330)+1)*330-29; 
     $parent 
      .css('height',newHeight) 
      .removeClass('grid-block') 
      .addClass('grid-block-long'); 
     //$('#main-grid').isotope('reLayout'); 
     $container.isotope('reLayout'); 
    }); 

    $('.read-less').click(function() { 
     var $this = $(this); 
     $this.hide(); 
     $this.nextAll('.grid-block-text') 
      .children("p:not(:first-child)").fadeOut('fast'); 
     $this.siblings('.read-more').fadeIn('slow'); 
     $this.parent('.grid-block-long') 
      .css('height',300) 
      .removeClass('grid-block-long') 
      .addClass('grid-block'); 
     $('#main-grid').isotope('reLayout'); 
     $container.isotope(); 
    }); 
}); 

클릭 사업부의 바닥은 항상 div의에 정렬됩니다 그리드가 일관성을 유지합니다. 한 번 클릭 한 번만 문제가 있습니다. 변경 사항이 즉시 발생합니다. div를 fadeIn으로 멋지게 찾고, 심지어는 아래쪽으로 부드럽게 확장하고, 실제로 애니메이션을 적용하면 변경이 너무 갑자기 발생하지 않습니다. 가능한지 확실치 않아? 어떤 제안이라도 대단히 감사하겠습니다!

당신이 높이를 설정을 변경할 수 있습니다

Answer 1

:

$parent.animate({ height: newHeight }, 'slow'); 

또는 CSS 추가 기능에서 (간결 없음 접두사) :

.journal-block { 
    transition: height 400ms; 
}