如何为MixItUp内容过滤器创建列表和网格视图切换

Question

我正在研究内容过滤器解决方案，我正在尝试在网格和放大器之间添加切换。列表视图。

我设法让切换工作。 但我希望img在我显示列表视图时缩小或隐藏。 Like in this example。

这是我的代码：

    //// ----  relayout  ---- ////
var layout        = 'grid', // Store the current layout as a variable
    $mixContainer = $('#mixContainer'); // Cache the MixItUp mixContainer

    $('#ChangeToGrid').on('click', function () {
        layout = 'grid';
        $(this).find('span').removeClass('inactive').addClass('active');
        $('#ChangeToList span').removeClass('active').addClass('inactive');
        $('.mix img').css({ 'display': 'block', 'opacity': '0', maxHeight: "400px", width: "", height: "" });
        $('.mix').css({ width: "", height: "" });

        goGrid();

        dropdownFilter.filterDates();

        function showImg () {
            $('.mix img').each(
                function ( i ) {
                    $(this).delay(0 + (i * 34)).animate({ opacity: 1 }, 134, "swing");
                }
                )
        };
        function goGrid () {
            $mixContainer.mixItUp('changeLayout', {
            containerClass: layout // Change the mixContainer class to 'list'
        }, showImg());
        }
    });
    $('#ChangeToList').on('click', function () {
        layout = 'list';
        $(this).find('span').removeClass('inactive').addClass('active');
        $('#ChangeToGrid span').removeClass('active').addClass('inactive');
        hideImg();

        dropdownFilter.filterDates();

        function hideImg () {
            $('.mix img').each(
                function ( i ) {
                    $(this).css({ 'display': 'block', 'opacity': '0', height: "0" });
                }, goList())
        }; 
        function goList () {
            $('.mix').each(function ( i ) {
                $(this).css({ 'width': '100%', 'opacity': '0.25', 'margin-top': '100px' });
                $(this).delay(0 + (i * 34)).animate({ marginTop: '0px', 'opacity': '1' }, 200, "swing");
            });

            $mixContainer.mixItUp('changeLayout', {
            containerClass: layout // Change the mixContainer class to 'list'
        });
        };
    }); 

//// ---- </ relayout >---- ////

http://codepen.io/tommers/pen/beNLJq

非常感谢任何帮助。