jQuery Girl
  1. jQuery Girl
  3. Si l’élément est dans la fenêtre d’affichage, arrêtez l’animation de défilement
Intereting Posts
Articles du cycle Twitter sur le carrousel Bootstrap inversés de droite à gauche (RTL) Prendre la valeur du paramètre url et l’append à l’image source avec jQuery JQuery charge les fichiers locaux de manière dynamic Les fonctions jQuery en queue ne s’exécutent pas après la première fois événements chargés et prêts à ne pas tirer Aide de sélecteur jQuery – comment trouver un élément dont l’ID commence et se termine par des caractères spécifiques Tableau d’parsing d’objects JSON dans ASP.Net Affichage de la couleur dans un menu déroulant à l’aide de Javascript Comment ajoutons-nous css + animation dans jQuery? Définition du nombre d’images visibles dans jCarousel La fonction Ajax ne fonctionne pas Jquery draggable position – clone Existe-t-il un moyen de contenir tous les arguments potentiels dans un tableau? Comment faire des objects jquery d’un tableau à partir d’une réponse php d’un appel ajax jQueryUI Draggable: contraindre la possibilité de glisser à un seul axe?

Si l’élément est dans la fenêtre d’affichage, arrêtez l’animation de défilement

Bonjour, j’ai suivi un tutoriel: http://css-sortingcks.com/slide-in-as-you-scroll-down-boxes/

Cela fonctionne très bien, cependant, quand un élément est déjà dans la fenêtre (comme si le navigateur est petit et que la page est chargée), jQuery n’ajoute pas la CLASSE à la transition avant le défilement APRES.

Existe-t-il un moyen de vérifier si un élément est déjà dans la fenêtre en charge, puis d’append une classe de ‘déjà vu?’

Essayer 

var viewed = Array.prototype.map.call(document.querySelectorAll("body *") , function (el, i) { return (el.getBoundingClientRect().bottom <= window.innerHeight && el.getBoundingClientRect().left <= window.innerWidth) && $(el).addClass("already-viewed") && el }).filter(Boolean); 
 $(document).ready(function () { var body = $("body"); $.each(new Array(180), function () { body.append( $("")) }); var viewed = Array.prototype.map.call(document.querySelectorAll("body *"), function (el, i) { return (el.getBoundingClientRect().bottom <= window.innerHeight && el.getBoundingClientRect().left <= window.innerWidth) && $(el).addClass("already-viewed") && el }).filter(Boolean); body .append("total images: " + $("img").length + ", already viewed: " + $(".already-viewed").length); console.log(viewed.length, $(viewed)) }); 
 body { width : 1000px; height : 1000px; } img { width : 50px; height : 50px; background : navy; } .already-viewed { outline:0.15em solid red; }