将鼠标悬停在任何段落上,将div添加到消息上,将其悬停,它会淡出,这是对的吗?

时间:2011-02-18 10:43:28

标签: javascript jquery hover fadein fadeout

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

它不能顺利运行,它只是不对......

3 个答案:

答案 0 :(得分: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个 - 在旧段落上淡出的段落和添加到新段落的段落。拥有两个具有相同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()
    });

});

答案 1 :(得分:2)

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

答案 2 :(得分:0)

我不认为你需要保持adidng并移除到dom。只需将范围放入style="display:none;",然后

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

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

这不会完全奏效,您可能不得不在默认样式中混淆不透明度以获得您想要的效果。不过,不需要操纵dom。