jQuery : défilement horizontal du texte au survol de la souris

Question

J'aimerais beaucoup recevoir de l'aide sur la base de l'image suivante :

En outre, j'essaie d'obtenir un défilement (infini) du texte vert à l'intérieur de l'écran. div.title-holder . Mon objectif est de faire en sorte que le défilement ne commence que sur mouseOver puis réinitialiser sur sortie de la souris de div.container . Je pensais que ce serait une tâche simple avec un peu de CSS et de jQuery, mais apparemment ce n'est pas le cas. Voici mon HTML, mon CSS et le JS qui l'accompagne :

<div class="container">
    <div class="title-holder">
        <a href="somelink.html">long text that needs to scroll</a>
    </div>
    <img src="someimage.jpg" />
</div>

CSS pertinent :

div.title-holder {
  width:130px;
  height:20px;
  overflow:hidden;
  white-space:no-wrap;
  text-align:center;
}
div.title-holder a {      
}

jQuery JS :

$('div.container').hover(
    function () {
        var scrollingWidth = $(this).find('div.title-holder').find('a').width();
        $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: scrollingWidth}, { duration: 5000, easing: 'swing' });
    },
    function () {
        $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: 0}, { duration: 5000, easing: 'swing' });
    }
);

Cela fonctionne bien, à l'exception de deux problèmes :

1. Il ne défile pas à l'infini, et
2. L'action de défilement est très très nerveux/agité

J'espère vraiment que quelqu'un a eu un besoin similaire dans le passé et qu'il pourra m'éclairer sur cette question. Merci de votre attention !

Answer 1

Je préfère utiliser setInterval. Peut-être que ceci violon aidera.

Answer 2

Ne faites pas cela ! Faire défiler du texte et distribuer des informations comme cela est une énorme , l'utilisabilité problème .

Utilisez cette méthode et vous ennuierez 80 % des utilisateurs de la page. victimes et la plupart d'entre eux ne liront pas, ne verront pas ou ignoreront le titre.

Rédiger des titres avec les 2 premiers mots à l'esprit, et les présenter ainsi s'ils doivent absolument être trop longs :

... où le lien "more" fait apparaître une div avec le titre complet.

Answer 3

Voilà, c'est parti

Travailler démo

J'espère que cela vous aidera.

Answer 4

Il y a un problème avec votre CSS ! Il est très simple de le faire fonctionner. Il suffit d'ajouter une ligne de CSS :

white-space:nowrap;

Le voici, le code complet : http://jsfiddle.net/sMmkX/115/