Criando efeito de filtragem com jQuery

Algo muito utilizando em portfólio é a opção de realizar filtro por segmento, onde você tem vários itens e quando é clicado no link, só vai mostrar as opções desse segmento. Um exemplo de utilização é quando você tem seu portfólio, que você atende vários clientes e você pode segmentá-los como Institucional, E-Commerce, entre outros. Assim o cliente só verá os trabalhos que atendam as suas necessidades.

É um efeito bem interessante e fácil de ser feito utilizando jQuery.

Primeiro, vou criar nosso HTML (colocarei apenas o conteúdo, sem a tag html, head, body)

<nav id="options">
            <ul>
                <li><a href="#" rel="all">Todos</a></li>
                <li><a href="#" rel="php">PHP</a></li>
                <li><a href="#" rel="html5">HTML5</a></li>

            </ul>
        </nav>
        <ul id="items">
            <li class="php"><a href="#"><img src="images/php-01.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/php-02.jpg" alt=""></a></li>
            <li class="html5"><a href="#"><img src="images/php-03.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/html5-01.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/html5-02.jpg" alt=""></a></li>
            <li class="html5"><a href="#"><img src="images/html5-03.jpg" alt=""></a></li>

        </ul>

Esse HTML é divido em duas parte: a parte da navegação e parte do conteúdo que será filtrado.

Na parte da navegação, é uma lista não ordenada, dentro da tag nav. Sendo que o link contém um atributo rel, o qual vamos informar o segmento que o conteúdo será filtrado. Veja que temos o valor all, que será pra exibir todo o conteúdo e temos php, e html5

A parte do conteúdo é uma lista não ordenada, sendo que os itens da lista terão uma classe informando de qual segmento elas pertencem.

Com o CSS vamos estilizar só para poder organizar a parte da navegação e do conteúdo.

#options, #items{
   width:700px;
   margin:0 auto;
}

#options ul{list-style:none; padding:0}
#options li{display:inline-block}
#options a{color:#333; }

#items{list-style: none; padding:0}
#items li{display:inline-block}

Basicamente removemos o bullets e definimos uma largura e também colocamos para exibido lado a lado.

Agora vamos ao jQuery, o código estará comentado:

 $(function() {
                /**
                 * Atribui o evento click ao link #options a
                 * Ao disparar o evento, é executado uma função anônima
                 */
                $("#options a").click(function() {
                    /**
                     * Definimos uma variavel, que recebe
                     * O valor do atributo rel
                     */
                    var type = $(this).attr('rel');
                    /**
                     * Verificamos se o valor do rel
                     * é diferente de all
                     */
                    if(type !== 'all'){
                        /**
                         * Aqui selecionamos os itens que tem a classe
                         * igual do atributo rel
                         * Usamos o animate, para criar animação em atributos do CSS
                         * que no caso é a largura, e opacidade.
                         * No caso, se tiver oculto, definimos com largura com valor 150,
                         * opacidade valor 1
                         **/
                         $("#items li."+type).animate({'width' : 150, 'opacity' : 1});
                         /**
                          * Aqui fazemos a mesma seleção, sendo usando :not,
                          * assim vamos selecionar os itens, que forem direrente
                          * do valor do atributo rel
                          * Usamos o animate, para definir o valor de largura como 0, e opacidade 0
                          */
                         $("#items li:not(."+type+")").animate({'width' : 0, 'opacity' : 0});
                    }else{
                        /**
                         * Caso o atributo rel do link clicado for all
                         * ele vai exibir todos os itens novamente
                         * definimos a largura, e a opacidade como 1
                         */
                         $("#items li").animate({'width' : 150, 'opacity' : 1});
                    }
                    /**
                     * Retorna como false, anular a ação padrão do link
                     */
                    return false;
                });
            });

O conteúdo todo ficará assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Efeito de Filtragem com jQuery</title>
        <meta charset="UTF-8">
        <style type="text/css">
            #options, #items{
                width:700px;
                margin:0 auto;
            }
            #options ul{list-style:none; padding:0}

            #options li{display:inline-block}
            #options a{color:#333; }

            #items{list-style: none; padding:0}

            #items li{display:inline-block}
        </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                /**
                 * Atribui o evento click ao link #options a
                 * Ao disparar o evento, é executado uma função anônima
                 */
                $("#options a").click(function() {
                    /**
                     * Definimos uma variavel, que recebe
                     * O valor do atributo rel
                     */
                    var type = $(this).attr('rel');
                    /**
                     * Verificamos se o valor do rel
                     * é diferente de all
                     */
                    if(type !== 'all'){
                        /**
                         * Aqui selecionamos os itens que tem a classe
                         * igual do atributo rel
                         * Usamos o animate, para criar animação em atributos do CSS
                         * que no caso é a largura, e opacidade.
                         * No caso, se tiver oculto, definimos com largura com valor 150,
                         * opacidade valor 1
                         **/
                         $("#items li."+type).animate({'width' : 150, 'opacity' : 1});
                         /**
                          * Aqui fazemos a mesma seleção, sendo usando :not,
                          * assim vamos selecionar os itens, que forem direrente
                          * do valor do atributo rel
                          * Usamos o animate, para definir o valor de largura como 0, e opacidade 0
                          */
                         $("#items li:not(."+type+")").animate({'width' : 0, 'opacity' : 0});
                    }else{
                        /**
                         * Caso o atributo rel do link clicado for all
                         * ele vai exibir todos os itens novamente
                         * definimos a largura, e a opacidade como 1
                         */
                         $("#items li").animate({'width' : 150, 'opacity' : 1});
                    }
                    /**
                     * Retorna como false, anular a ação padrão do link
                     */
                    return false;
                });
            });
        </script>
    </head>
    <body>

        <nav id="options">
            <ul>
                <li><a href="#" rel="all">Todos</a></li>
                <li><a href="#" rel="php">PHP</a></li>
                <li><a href="#" rel="html5">HTML5</a></li>

            </ul>
        </nav>
        <ul id="items">
            <li class="php"><a href="#"><img src="images/php-01.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/php-02.jpg" alt=""></a></li>
            <li class="html5"><a href="#"><img src="images/php-03.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/html5-01.jpg" alt=""></a></li>
            <li class="php"><a href="#"><img src="images/html5-02.jpg" alt=""></a></li>
            <li class="html5"><a href="#"><img src="images/html5-03.jpg" alt=""></a></li>
        </ul>

    </body>
</html>

Você pode ver o efeito funcionando aqui: Demo

Espero que tenham gostado e até a próxima.