Jquery 文本动画，补间或塑造从一个到另一个？答案

【问题标题】：Jquery text animation, tween or shaping from one to another?Jquery 文本动画，补间或塑造从一个到另一个？
【发布时间】：2013-08-29 07:16:24
【问题描述】：

我用谷歌搜索了很多，但没有找到任何适合我需要的东西。我想知道是否可以使用 Jquery 为文本设置动画，以便（例如）在鼠标悬停时将其更改为一些不同的文本。最简单的例子：

我的文字是GOGL

在鼠标悬停/悬停时，它会通过一些漂亮的动画更改为GOOGLE

鼠标移开时，它会变回GOGL

是否有一些很棒的 jQuery 插件可以用于类似的东西或不同的 javascript 库？

欢迎提出建议

【问题讨论】：

johnpolacek.github.io/scrollorama 你可以根据需要调整它（因为你不需要滚动）
你想要这样的东西jsfiddle.net/CqSne？
是的，这样的东西会满足我的需要......只是我会添加一些动画，所以它看起来“更漂亮”......但这和我的问题一样好，所以请写一个答案，这样我就可以接受了：）谢谢
@dzordz 用新的演示添加了答案

标签： javascript jquery text jquery-animate

【解决方案1】：

DEMO

$('#test').hover(function () {
    $(this).text('GOOGLE').stop(true, true).animate({
        width: "65px"
    }, 500);
}, function () {
    $(this).stop(true, true).animate({
        width: "45px"
    }, 500).text('GOGL');
});

Old DEMO

【讨论】：