problèmes avec le défilement horizontal en utilisant jQuery.ScrollTo/jQuery.SerialScroll

Question

J'essaie de développer le défilement horizontal automatique pour notre site Web en utilisant - jQuery.ScrollTo/jQuery.SerialScroll. Je ne suis pas sûr si c'est la meilleure bibliothèque de jquery pour faire cela, mais s'il y a quelque chose de mieux, s'il vous plaît faites le moi savoir.

Voici le comportement que je veux, consultez la liste foursquare's "Activité récente". Les données qui seront actualisées proviendront d'une requête ajax que je ferai toutes les quelques secondes en utilisant window.setInterval. Je ne suis pas vraiment un mec script CSS/java donc je n'ai pas pu comprendre jQuery.SerialScroll.

Voici la - regardez la liste "Live Job Feeds". Actuellement, la liste rafraîchit les données provenant de l'appel ajax, mais je ne vois pas l'effet, l'animation, en fait, je ne pense même pas que serialScroll est utilisé. En ce moment, je fais un - $ ('# feed-ticker'). Prepend (contenu) pour pré-ajouter les données nouvellement arrivées.

Vous pouvez créer une source de vue pour observer le code actuel.

Toute aide serait vraiment appréciée. Merci.

Answer 1

$.scrollTo() (et par extension, le plugin SerialScroll) permet de régler la position de la barre de défilement du navigateur . Par exemple, $(document).scrollTo() est idéal pour faire défiler en douceur vers un endroit différent de votre document. (Vous pouvez, bien sûr, également régler la position de défilement d'un élément de bloc avec le style overflow:auto ou overflow:scroll.)

il ressemble Eyeballing le site que vous lié à, ils ne sont pas à l'aide scrollTo() pour atteindre le nouvel élément d'animation comportement. Au lieu de cela, le style du bloc conteneur est défini sur overflow:hidden et les nouveaux éléments sont créés avec un height de zéro. Une fois insérée dans la page, la hauteur du nouvel objet est ensuite animée à 75px (ou peu importe). Cela pourrait être une meilleure approche pour vous de prendre.

En supposant content est un objet jQuery:

content.height(0); 
$('#feed-ticker').prepend(content); 
content.animate({ 
    height: 75 // or whatever your target height is 
}, 500); // animation's duration in milliseconds 

magique!