将鼠标悬停在任何段落上，附加带有小消息的 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 的原因是，当您离开一个段落并进入下一个段落时，您将暂时有两个 spans ——一个在旧段落中淡出，一个添加到新段落中。两个元素具有相同的 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

在我看来，你不需要不断地添加和删除 dom。只需将跨度默认设置为 style="display:none;" ，那么

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

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

这将无法完全正常工作，您可能必须扰乱默认样式中的不透明度才能获得您想要的效果。不过，不需要操纵 dom。