<ul id="filters" class="clearfix" style="text-align: center;">
    <li id="filtro" style="text-align: center;"  class="categoria-todas"><span class="filter" data-filter="portfolio" >TODAS</span></li>
    <?php foreach ($categorias as $cat) { ?>
        <li style="text-align: center;" id="filtro" class="categoria-app">
            <span class="filter" data-filter="<?= $cat->categoriaID ?>"><?= $cat->categoriaTITULO ?></span>
        </li>
    <?php } ?>
</ul>










<script type="text/javascript">

    $(".categoria-todas").click(function () {
        $(".categoria-app").fadeIn();
        $(this).addClass('categoria-activa');
    });

    $(".categoria-app").click(function () {
        $(".categoria-app").fadeOut();
        $(this).addClass('categoria-activa').fadeIn();
    });

    var listaApps;
    $(function () {
        var filterList = {
            init: function () {
                // MixItUp plugin
                // http://mixitup.io
                listaApps = $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });
            },
            hoverEffect: function () {
                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                        function () {
                            $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                            $(this).find('img').stop().animate({top: 0}, 500, 'easeOutQuad');
                        },
                        function () {
                            $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeInQuad');
                            $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
                        }
                );
            }
        };
        // Run the show!
        filterList.init();
    });
</script>