Plugin Isotope : pb de transition au moment du filtrage

cleo57
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je rencontre un problème sur mon site avec le plugin isotope au moment de l'affichage des pages filtrées : les transitions sont saccadées sous chrome et safari alors que tout est fluide avec firefox. Je n'arrive pas à comprendre d'où cela peut venir.

Html:

<nav>
            <ul id="filtre">
                <li class="active"><a href="#" data-filtre="*">All</a></li>
                <li><a href="#" data-filtre=".diary">36 vues</a></li>
                <li><a href="#" data-filtre=".lith">Lith</a></li>
                <li><a href="#" data-filtre=".color">Color</a></li>
            </ul>
        </nav>
        <section id="folio">
        <div class="projet diary">            
            <a href="img/image-1.jpg" data-lightbox="portfolio-diary" data-title="36 vues..."><img src="img/image-1.jpg" alt=""></a>
        </div>

        <div class="projet diary">
            <a href="img/image-2.jpg" data-lightbox="portfolio-diary" data-title="36 vues..."><img src="img/image-2.jpg" alt=""></a>
        </div>

        <div class="projet diary">
            <a href="img/image-3.jpg" data-lightbox="portfolio-diary" data-title="36 vues..."><img src="img/image-3.jpg" alt=""></a>
        </div>

        <div class="projet diary">
            <a href="img/image-4.jpg" data-lightbox="portfolio-diary" data-title="36 vues..."><img src="img/image-4.jpg" alt=""></a>
        </div>

        <div class="projet color">
            <a href="img/image-5.jpg" data-lightbox="portfolio-color" data-title="Color"><img src="img/image-5.jpg" alt=""></a>
        </div>
        </section>

Partie Jquery:

$(function() {

    // Isotope projets folio

    $('#folio').isotope({

        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:'*',
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            }

    });

    // Filtre projets

    $('#filtre li a').click(function(){

    $('#filtre li').removeClass('active');
    $(this).parent().addClass('active');

    filtre = $(this).attr('data-filtre');

    $('#folio').isotope({ 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:filtre,
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            } 
    });

    return false;

    });

    // LIGHTBOX

    $('#folio a').lightBox();

});

Ce que je veux

J'aimerais que lorsque je clique sur l'un des filtres du menu l'affichage soit fluide

Ce que j'obtiens

Cela marche uniquement avec firefox, mais avec chrome et safari les images tressautent au moment du repositionnement..

Merci pour votre aide ;)

Aucune réponse