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');
    }

切换视图中的CSS转换

1 个答案: