Le déclenchement de jquery événement lorsqu'un élément s'affiche sur l'écran
Je veux montrer un effet de fondu dès que l'élément s'affiche sur l'écran. Il y a beaucoup de contenu avant cet élément si je déclenchement de l'effet sur le document.prêt, à certaines résolutions les visiteurs wontt voir.
Est-il possible de déclencher un événement lorsque, après le défilement vers le bas, l'élément devient visible?
Je suis presque sûr que j'ai vu cet effet avant, mais n'ont aucune idée de la manière de l'atteindre.
Merci!
- En double? stackoverflow.com/questions/487073/...
- Peut-être un autre en double: stackoverflow.com/questions/1225102/...
Vous devez vous connecter pour publier un commentaire.
jQuery Waypoints plugin pourrait être utile. Il fournit un moyen de déclencher une action lorsqu'un élément est visible sur l'écran.
Par exemple:
Il y a quelques exemples sur le site du plugin.
Cela fonctionne le mieux pour moi que les autres dans ce post:
http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/
Utilisation est simple:
Vous pouvez voir comment ce plugin est utilisé pour créer votre effet ici:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
Si u utiliser les onglets. (par exemple jQuery UI tabs), vous devez vérifier si l'onglet est actif.
Jquery.apparaissent plugin est la meilleure façon de résoudre ce problème.
démo.
Si vous voulez un moyen simple et de travail solution:
return ($(window).height() + $(window).scrollTop()) > $(obj).offset().top;
Une rapide recherche s'est jusqu'à présent fenêtre d'affichage extension pour jQuery qui vous permettra de vérifier un élément de visibilité dans la fenêtre d'affichage. Si votre élément n'est pas dans la fenêtre d'affichage, ne faites pas votre fondu dans l'animation.
Je pense que vous faites allusion, le plugin jQuery "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin
En regardant le code source, il semble que le plugin est en train de faire quelque chose comme ceci:
Si vous êtes à la recherche pour déclencher un événement lorsqu'un spécifié, ou la cible de l'élément parchemins dans l'affichage, vous pouvez le faire en déterminant les valeurs suivantes:
fenêtre
De considérer les éléments suivants:
Extrait De Code De Démonstration:
L'extrait de code ci-dessous montre un exemple de travail d'un enjeu commun: la fixation d'un élément de la fenêtre d'affichage lorsqu'un élément spécifié défile dans l'affichage.
JS:
CSS:
HTML:
Sandbox Exemple: CodePen
REMARQUE:
Ce sera le seul applicable à des actions de défilement sur le document et non pas à toutes les éléments contenus à l'intérieur d'un défilement du volet vue.