전환 도중 CSS 전환

Question

목록과 그리드 간 전환보기를 위해 http://jsfiddle.net/mH5JS/4/에 일부 코드를 준비합니다.

$('button.lists-list').attr('disabled', 'disabled'); 

$('.lists button').on('click',function() { 
    if($(this).hasClass('lists-grid')) { 
     // Change view 
     $('body .view-list').removeClass('view-list').addClass('view-grid'); 
     // Disable buttons 
     $(this).attr('disabled', 'disabled'); 
     $('button.lists-list').removeAttr('disabled'); 
    } else if($(this).hasClass('lists-list')) { 
     // Change view 
     $('body .view-grid').removeClass('view-grid').addClass('view-list'); 
     // Disable buttons 
     $(this).attr('disabled', 'disabled'); 
     $('button.lists-grid').removeAttr('disabled'); 
    } 
}); 

보기를 변경하는 데 애니메이션을 추가하는 방법은 무엇입니까?

Answer 1

내가하는 방법을 아는 유일한 방법은 명시 적으로 애니메이션 호출의 높이와 너비를 변경하고 클래스를 전환하지 않는 것입니다. 그래서

http://jsfiddle.net/mH5JS/5/

$('.lists button').on('click',function() { 
    if($(this).hasClass('lists-grid')) { 
     // Change view 
     //$('body .view-list').removeClass('view-list').addClass('view-grid'); 
     $('body .view-list li img').animate({    
      width: 125, 
      height: 200 
      }); 
     // Disable buttons 
     $(this).attr('disabled', 'disabled'); 
     $('button.lists-list').removeAttr('disabled'); 
    } else if($(this).hasClass('lists-list')) { 
     // Change view 
     //$('body .view-grid').removeClass('view-grid').addClass('view-list'); 
     $('body .view-list li img').animate({    
      width: 55, 
      height: 100 
      }); 
     // Disable buttons 
     $(this).attr('disabled', 'disabled'); 
     $('button.lists-grid').removeAttr('disabled'); 
    } 

같은