jQuery在鼠标悬停时水平滚动文本 [英] jQuery horizontal scrolling of text on mouseover

问题描述

我非常感谢您根据以下图片提供的帮助：

I would really appreciate some help based on the following image:

此外，我试图完成（无限）滚动的绿色文本 div.title -holder 。我的目标是滚动只在 mouseOver 上开始，然后在 div.container 的 mouseOut 上重置。我认为这将是一个简单的任务与一点CSS和jQuery，但显然不是这样。这是我的HTML，CSS和附带的JS：

Furthermore, I am trying to accomplish (infinite) scrolling of the green text within div.title-holder. My aim is for the scrolling to begin only on mouseOver and then reset on mouseOut of div.container. I thought this would have been a simple task with a bit of CSS and jQuery, but apparently not so. Here is my HTML, CSS and accompanying JS:

<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：

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

jQuery JS：

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' });
    }
);

现在，这个工作正常，除了2个问题：

Now, this works okay, except for 2 problems:

1. 它不会无限滚动，


2. 滚动操作非常非常 jumpy / jittery

1. It does not scroll infinitely, and
2. The scroll action is very very jumpy/jittery

我真的希望有人在过去有类似的要求，可以为我解释这件事。 谢谢！

I really do hope that someone has had a similar requirement in the past and can shed some light on this matter for me. Thank you!

推荐答案

我更喜欢使用setInterval。也许这小提琴会有所帮助。

I prefer using setInterval. Maybe this fiddle will help.

这篇关于jQuery在鼠标悬停时水平滚动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！