悬停时临时动画输入类型文本答案

【问题标题】：Temporarily animate input type text when hovering悬停时临时动画输入类型文本
【发布时间】：2013-10-08 02:21:44
【问题描述】：

如果文本比当前输入宽度宽，我想显示输入类型文本的内容。

当我悬停该字段时，我希望文本向左滚动或类似的东西，以便查看隐藏的文本。

谢谢。

注意：请告诉我是否必须添加/更改问题的标签。

【问题讨论】：

问题很好，也很清楚，但是您自己尝试过吗？很高兴看到一些研究或代码工作。

标签： javascript html

【解决方案1】：

我想过我该怎么做，这就是我想出的。

在输入悬停时，我将获取输入值并将其放入 div（或任何其他元素）中。然后获取该 div 的宽度并将其与输入的宽度进行比较。如果 div 比输入宽，那么我将通过宽度的差异对输入文本缩进进行动画处理。

$('input').hover(function(){
    var temp = $('div').html($(this).val()).width();
    if($(this).width() < temp){
        $(this).animate({
            textIndent: $(this).width()-temp
        }, 100);
    }
});

您可以在此处查看完整的解决方案：http://jsfiddle.net/taneleero/tB5C5/2/

应该足以让你继续前进。

【讨论】：

另一种解决方案在 Firefox 中不起作用，因为浏览器处理输入的方式非常不同。我已经更新了我的小提琴，包括鼠标离开时的重置，并检查输入何时获得焦点，以便它停止动画并重置。 jsfiddle.net/taneleero/tB5C5/1
它可以在您提供的链接中使用，但我正在使用其他 div 元素，所以您可以更改它以使其仅针对一个元素吗？如果这可行，我会接受您的回复作为答案。谢谢。
它自己工作，但是当我把它放在我的项目中时，它所做的只是显示带有文本的 div。它不会制作动画。
很难在没有看到您的项目的情况下发表评论。
是的，问题出在项目上，所以这个细节我得亲自检查。但就我的问题而言，你已经给了我一个正确的答案。谢谢。

【解决方案2】：

嗯，尽管我确实发表了评论。自己无法抗拒这一点。使用 jQuery：

<input type="text" id="txt" value="A very long text goes here very long text goes here very long text goes here very long text goes here very long text goes here indeed."></input>

$('#txt').hover(

    function() {
        $(this).animate({"scrollLeft": this.scrollWidth}, this.value.length*50)
    },

    function() {
        $(this).stop();
        this.scrollLeft = 0;
    }
)

这里 jQuery .animate() 用于动画.scrollLeft 输入字段中文本的位置。动画持续时间与文本长度相关，因此各种文本的速度应该相同。当鼠标离开输入控件时 - 滚动位置重置为原始位置。

演示：http://jsfiddle.net/uPGmC/

如果您在 Google 上搜索一下“输入文本向左滚动”，您会找到像 this 这样的答案，将其与 hover 和 animate 上的 jQuery 文档结合起来，您可以自己拼凑解决方案。

【讨论】：

是的，只是注意到这仅适用于基于 WebKit 的浏览器（Chrome、Safari、Opera）。必须弄清楚原因