使用 Jquery 悬停鼠标时创建标题滑动答案

【问题标题】：Create the title sliding when hover mouse using Jquery使用 Jquery 悬停鼠标时创建标题滑动
【发布时间】：2013-03-16 18:51:25
【问题描述】：

我有 h2 标签，宽度只有 100 像素，但 h2 标签内的文本内容超过 100 像素，我想显示文本内容只出现在一行中。我想让它像在 brazzers.com 上一样，当用户将鼠标悬停在帖子标题上时，帖子的长标题将滑动以显示所有内容。有没有办法使用 jquery 创建它？对不起我的新手问题

【问题讨论】：

+1 为 brazzers.com 示例 :)
我想有些用户无法在 brazzers.com 上查看示例。如果您可以提供另一个来源来检查您正在尝试做什么，这可能会有所帮助......

标签： javascript jquery html

【解决方案1】：

请试试这个例子：

http://jsfiddle.net/QKstB/2/

这是一个脚本：

var textWidth = $('h1 nobr').outerWidth(),
    totalWidth = $('h1').outerWidth(),
    diff = totalWidth - textWidth;

$('h1').hover( function() {
    $('h1 nobr').animate({ 'margin-left': diff }, 5000, function() { 
        $(this).css('margin-left', 0)
    });
}, function() { 
    $('h1 nobr').stop(true, true);
});

【讨论】：

是的，这正是我想要的一个例子。但是当我悬停标题时它没有回到正常位置，是否有另一种方法可以在用户离开悬停标题后让标题再次恢复正常？
@JhonnyJr。已修复，请检查新链接。您可以使用 2 个悬停功能和动画参数来获得您想要的效果。

【解决方案2】：

这似乎是你可以用 CSS 和悬停行为来做的事情

#test {
    width:30px;
    overflow:hidden;
    white-space:nowrap;
}
#test:hover
{
    overflow:visible;
}

http://jsfiddle.net/tYEfs

另外，可能是参考链接上的 nsfw 警告？

【讨论】：

【解决方案3】：

我会创建一个带有溢出的 div: hidden 并且在这个 div 内部将是 h2 标记，其位置设置为相对或绝对（取决于您的结构和预期行为）。一旦鼠标悬停在 div 上，我将使用 http://api.jquery.com/animate/ 将 css“left”属性设置为负值。

P.S: 没有查例子，因为在工作中……

【讨论】：