Переход 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'); 
    }