javascript - 使用 Jquery 悬停鼠标时创建标题滑动

Question

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

Answer 1

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

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

http://jsfiddle.net/tYEfs

另外，也许参考链接上的 nsfw 警告？

Answer 2

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

PS：没有查看示例，由于正在工作......

Answer 3

请试试这个例子：

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