déclencher une alerte après jquery isotope filtre complète

J'ai jquery isotope de l'installation et ont créé des filtres. Quand je crée, j'sélectionnez un filtre, l'isotope n'est une jolie petite animation. Je veux déclencher une alerte à la fin de l'animation.

Cet exemple demostrates l'animation qui se produit:

http://isotope.metafizzy.co/demos/filtering.html

Des idées?

Ici est le code de clic d'un filtre:

$('.filter').on( 'click', 'a', function( event ) {
        event.preventDefault();
        var $this = $(this);
        //don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        //console.log('hello world');
        var $optionSet = $this.parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        options.comboFilters[ group ] = $this.attr('data-filter-value');
        $.bbq.pushState( options );

        //COUNT
        var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
        //get count of all filtered item
        alert($filtered.length);
        //get count of all filtered items that match a selector
        //$filtered.filter('.blue').length;
  });
InformationsquelleAutor David | 2012-10-03
  1. 8

    Depuis v1.5 (changelog), l'Isotope fournit un rappel pour le faire; c'est décrite dans Isotopes de l'Introduction (il suffit de chercher la page pour callback):

    En outre, vous pouvez spécifier un rappel après l'objet d'options. Cette fonction sera déclenchée une fois l'animation terminée.

    onAnimationFinished = function(){
  //code to be executed after the animation finishes
};

$('#container').isotope({ filter: '.my-selector' }, onAnimationFinished);

    Pour des exemples vivants de prendre un coup d'oeil à cette jsFiddle qui déclenche une alerte lors de la modification d'un filtre via la case à cocher, des entrées ou des peep Isotopes de Rappel du Test source et de recherche pour changeBGColor.

    InformationsquelleAutor fk_
  2. 4

    N'a pas fonctionné pour moi. Au lieu de cela, j'ai utilisé ce qui est expliqué dans le cas des sections :
    http://isotope.metafizzy.co/events.html

    function onLayout() {
        //What to do when layout fully rendered
    }
    //bind event listener
    $isotope.isotope( 'on', 'layoutComplete', onLayout );
    InformationsquelleAutor nbonniot
  3. 2

    Cela n'a pas fonctionné pour moi, en utilisant des Isotopes 2.0. Je ne suis pas non plus à l'aide de jQuery, donc peut-être que l'utilisation est différente avec de la vanille JS.

    De toute façon, si tout le monde court dans ce problme, je l'ai eu à travailler à l'aide d'2.0 de rappel d'événement: iso.on('layoutComplete', myFunction).

    Plus d'infos sur les événements: http://isotope.metafizzy.co/events.html

    InformationsquelleAutor mhkeller
  4. 0

    Aucun de ces fonctionné pour moi. Je ne suis pas sûr si c'est la version la plus récente de l'Isotope et/ou jQuery 2.1.1. Peu importe, j'ai trouvé une solution sur github:

    $isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", mafonction);

    InformationsquelleAutor arrow