鼠标悬停时文本的jQuery水平滚动答案

【问题标题】：jQuery horizontal scrolling of text on mouseover鼠标悬停时文本的jQuery水平滚动
【发布时间】：2014-10-07 01:10:33
【问题描述】：

非常感谢基于以下图片的一些帮助：

此外，我正在尝试在div.title-holder 中完成（无限）绿色文本滚动。我的目标是只在 mouseOver 上开始滚动，然后在 div.container 的 mouseOut 上重置。我认为这将是一个简单的任务，只需一点 CSS 和 jQuery，但显然不是这样。这是我的 HTML、CSS 和随附的 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：

$('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 个问题：

它不会无限滚动，并且
滚动动作非常非常跳跃/紧张

我真的希望过去有人有类似的要求，并且可以为我阐明这件事。 谢谢！

【问题讨论】：

我知道以前有人问过这个问题，但我想要的最终结果不同。

标签： jquery css scroll

【解决方案1】：

我更喜欢使用 setInterval。也许这个fiddle 会有所帮助。

【讨论】：

嗨，Raymond，感谢您的提琴 - 它完全符合我的要求！但有一件事，滚动动作往往有点紧张......关于如何最小化这种抖动的任何想法？我还更新了 fddkle 以仅在超链接宽度大于其父容器的宽度时滚动 (jsfiddle.net/KpuyT/3)
真的很抱歉，我不知道如何将抖动降到最低。也许使用本机javascript而不是jquery（对于某些功能）会起作用。
很酷，我会玩弄间隔毫秒。如果有办法将 jquery 的缓动集成到 setInterval 中就好了。

【解决方案2】：

不要这样做！像这样滚动文本和分发信息是huge、usability problem。

使用它，你会惹恼该页面 80% 的~~受害者~~用户，而且大多数人也不会阅读/看到或忽略标题。

写标题时要记住the First 2 Words，如果它们绝对必须太长，就这样显示。：

...“更多”链接会弹出一个带有完整标题的 div。

【讨论】：

布洛克，我不能再同意你的看法了。不幸的是，付钱给码头的人唱了调子！这是与客户讨论过的，但这是他们想要的方式。这实际上是用于照片库（由 Drupal 提供支持的 CMS），所以我需要为内容编辑器输入一个很长的标题提供服务。每个div.container嵌套如下ul > li > div.container，所以在一页上，至少有9个。如果您有任何其他建议，请随时提供任何建议。谢谢！
对不起：“……付钱给吹笛者的人……”

【解决方案3】：

给你

工作demo

希望对你有所帮助。

【讨论】：

嗨 Shankar，谢谢你的提琴。不幸的是，多余的文字被剪掉了
@Shalan - 什么额外的文字？你可以用小提琴来满足你的期望。我给了你一个好的开始。
<a>long text that needs to scroll</a> 被截断为<a>long text that needs</a>。额外的文本是“滚动”，即滚动时需要进入视图的溢出文本。目前只有截断的文本滚动。再看看小提琴。

【解决方案4】：

您的 CSS 有问题！让它工作非常简单。只需添加一行 CSS：

white-space:nowrap;

在这里，完整代码：http://jsfiddle.net/sMmkX/115/

【讨论】：