Otra transición nerviosa de jQuery Quicksand

0

Cuando presiono el filtro, el li obtiene una posición superpuesta a la izquierda antes de entrar en la transición al filtro. Probé las preguntas y respuestas anteriores, pero no se resolvió el problema. El ul no usa una posición absoluta, la clase li ha dejado flotante.

aquí está el html

    <div class="filters">

        <ul id="filters" class="clearfix">
            <li><a title="all" href="#" class="active"> all </a></li>
            <li><a title="web" href="#"> web </a></li>
            <li><a title="app" href="#"> app </a></li>
            <li><a title="logo" href="#"> logo </a></li>
            <li><a title="card" href="#"> card </a></li>
            <li><a title="icon" href="#"> icon </a></li>
        </ul>

    </div>

    <div id="portfolio">

        <ul id="portfolio_list">

            <li class="portfolio" data-id="id-1" data-type="logo">
                <div class="portfolio-wrapper">             
                    <img src="images/portfolios/logo/5.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Bird Document</a>
                            <span class="text-category">Logo</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </li>               

            <li class="portfolio" data-id="id-2" data-type="app">
                <div class="portfolio-wrapper">         
                    <img src="images/portfolios/app/1.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Visual Infography</a>
                            <span class="text-category">APP</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </li>
         </ul></div>

Y esta es la llamada de jQuery

$(document).ready(function () {

    var $filter = $('#filters a');
    var $portfolio = $('#portfolio_list');
    var $data = $portfolio.clone();

    $filter.click(function(e) {

        if ($($(this)).attr("title") == 'all') {
            var $filteredData = $data.find('li');
        } else {
            var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
        }

        $portfolio.quicksand($filteredData, {
            adjustHeight: 'dynamic',
            duration: 800,
            easing: 'easeInOutQuad'
        });

        $('#filters a').removeClass('active');
        $(this).addClass('active');

    });

}); 

olvidé publicar el css

#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
    #portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important;    cursor:pointer; }
    #portfolio_list .portfolio img { max-width:100%; position: relative; }
    #portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
        #portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
        #portfolio_list .portfolio .label-text { color:#000; position: relative;    z-index:500; padding:12px 8px 0; }
            #portfolio_list .portfolio .text-category { display:block; }

Se agradece cualquier ayuda. Gracias.

1
  • ¿Puedes poner un violín para que lo veamos?
    Sharky
    28 de marzo de 2014 a las 9:46
0

El problema fue causado por el mismo ID usado para diseñar el ul y li y al mismo tiempo llamarlo con jQuery. Es necesario usar una ID sin estilos CSS para no crear fallas en arenas movedizas.