jQuery Quicksand: CSS appliqué après que la charge JS provoque un comportement saccadé

Question

J'utilise le plugin jQuery Quicksand pour filtrer une liste par dates.

Je l'ai travaillé comme dans les exemples donnés, cependant, le filtre est appliqué à des éléments qui <li> charge comme block et une fois que tous les éléments ont chargé le float:left CSS est appliqué. Rendre l'ensemble du processus un peu nerveux et désordonné. Ce que je n'arrive pas à comprendre, c'est pourquoi cela n'arrive pas aux exemples du site Quicksand, où les listes disparaissent et réapparaissent doucement. J'ai regardé de près le CSS et essayé de nombreuses variantes de duration et easing mais la même chose se produit.

Answer 1

Le problème était que le CSS était appliqué à l'ID sur lequel jQuery agissait. Par conséquent, chaque fois qu'il y a eu une manipulation jQ, le style a été rechargé. En appliquant également une classe, sur laquelle le CSS a agi, les deux ont été gardés séparés et donc le style a été immédiatement appliqué.

dire <ul id="magazines"> avec jQ agissant sur #magazines et CSS agissant également #magazines causé le retard dans le chargement. Avec jQ agissant sur #magazines et CSS agissant sur .mag-list est le chemin à parcourir.

Answer 2

La réponse est, que votre css li devrait toujours être flottant: gauche. Cela devrait être codé en dur dans votre feuille de style. Vous devriez cacher le ul en utilisant JS, créer le li chargé avec le contenu, puis montrer le ul.

En fait, tous les css doivent être codés en dur dans la feuille de style, masquer le ul, charger le lis, montrer le ul. De cette manière, il est plus facile de configurer l'amélioration progressive, grâce à laquelle les utilisateurs sans js peuvent accéder au même contenu, mais sans les animations. Pour commencer, l'UL ne sera pas caché, parce que c'est fait, en utilisant js. Alors tout ce que vous avez à faire est d'avoir les boutons radio comme ancres pour les utilisateurs non js, quand ils cliquent dessus ajoute une chaîne de requête sur l'URL, qui est accessible via la méthode get, vous pouvez probablement travailler dans le backend ajax existant.

Vous permutez ensuite les liens pour les boutons radio dans votre js.