jquery - 切换视图期间的 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');
    }