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

Question

i have h2 tag and have width just 100px but the text content inside h2 tag is more than 100px, i want to show text content appear just in one line. I want to make it like on brazzers.com, When user hover the mouse on title of post, the long title of post will be sliding to show all. Is there a way to create it using jquery? Sorry about my newbie question

Answer 1

Seems like this is something you can just do with CSS and hover behaviors

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

http://jsfiddle.net/tYEfs

Also, maybe a nsfw warning on the reference link?

Answer 2

I would create a div with overflow: hidden and inside this div would be the h2 tag with postion set to relative or absolute (depends on your structure and intended behaviour). As soon as the mouse is over the div I would use http://api.jquery.com/animate/ to animate the css "left" property to a negative value.

PS: Did not check the example, due to being on work ...

Answer 3

Please, try this example:

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

This is a script:

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