Question

http://jsfiddle.net/nicktheandroid/3AraQ/

When a P is hovered over, #both is appended to that paragraph and centered. When i hover off and then onto a new paragraph, it fades out on the first P and fades in on the now hovered P. is this the best way to do it? Later on i’ll use this to allow people to click a bookmark image, then when they hover a P it will do what my code below does, then when they click on that P it will create a bookmark to that paragraph, but I really just need help with the code below. THANKS!

$('p').hover(function() {

    $(this).append('<span id="both">BOOKMARK THIS</span>')
        $('#both').animate({opacity: 1.0}) 

}, function(){
        $('#both').fadeOut(600, function(){
            $(this).remove()
        })
});

it’s not working smoothly, it’s just not right….

Answer 1

Just use class instead of id:

$('p').hover(function() {

    $(this).append('<span class="both">BOOKMARK THIS</span>')
        $('.both').animate({opacity: 1.0}) 

}, function(){
        $('.both').fadeOut(600, function(){
            $(this).remove()
        })
});

http://jsfiddle.net/yzXxH/