将鼠标悬停在任何段落上，在div上添加小信息，将鼠标悬停，淡出，是吗？

Question

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

当P悬停时，#both被追加到该段落并居中。当我徘徊，然后到一个新的段落，它在第一个P上淡出，并在现在悬停的P上淡出。这是做到这一点的最佳方式吗？稍后，我将使用它来允许用户点击书签图像，然后当他们将鼠标悬停在P上时，它将执行下面的代码，然后当他们点击该P时，它会为该段创建一个书签，但我真的只需要帮助下面的代码。谢谢！

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

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

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

它不工作顺利，它只是不正确....

Answer 1

只需使用类而不是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/

Answer 2

我可能会改变它一点点：

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

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

}, function(){ 

    var both = $(this).find('span.both'); 
    both.fadeOut(600, function(){ 
     both.remove() 
    }); 

}); 

我用了class代替id的原因当你离开一个段落并进入下一个段落时，你将暂时拥有两个这样的span s   —这是旧段落中淡出的那个段落，以及添加到新段落中的一个。有两个相同的元素id是无效的，充满了危险。

我可能也取消动画，如果我早回来同款：

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

    $(this).find('span.both').stop().remove(); // Stop and remove it if it's there 
    $('<span class="both">BOOKMARK THIS</span>') 
     .appendTo(this) 
     .animate({opacity: 1.0}) 

}, function(){ 

    var both = $(this).find('span.both'); 
    both.fadeOut(600, function(){ 
     both.remove() 
    }); 

}); 

Answer 3

它看起来并不像你对我有一个需要不断adidng和消除了DOM。只要把跨度默认情况下与style="display:none;"，然后

$('p').hover(function() { 
     $(this).find('#both').animate({opacity: 1.0}) 

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

这将不完全工作，你可能要惹的默认样式不透明度得到你想要的东西。不过，不需要操纵dom。