删除元素后淡出

Question

我有一些代码，通过在光标坐标附加图像，然后淡出90年代样式的鼠标线索。目前它保持页面上的附加图像，但我想删除它后淡出什么线索什么在回调后fadeOut

我试过的几个选项似乎没有显示小道，因为它是太早删除或移除所有的

(document).mousemove(function(e) { 

    pointer = $('<img>').attr({ 
     'src':'images/sparkle.png' 
    }); 

    $('body').append(pointer); 

    pointer.attr('class','pointer').css({ 
     position:'absolute', 
     top: e.pageY +2 , 
     left: e.pageX +2 

    }).fadeOut(2000,'easeInOutBounce',function(){ 
     //something here to remover 
    }); 


}); 

Answer 1

在fadeOut完整的回调函数，你可以把这个：

$(this).remove(); 

或更优化，避免了jQuery的电话：

this.parentNode.removeChild(this); 

另外，不要忘了var声明pointer的说明符，这是您的问题的原因，因为您只有一个全球pointer v良莠不齐。

这就是说，它完全有可能写这个函数，不需要任何临时变量：

$(document).mousemove(function(e) { 
    $('<img>', { 
     'src': 'images/sparkle.png', 
     'class': 'pointer' 
    }) 
    .css({ 
     top: e.pageY + 2, 
     left: e.pageX + 2 
    }) 
    .appendTo(document.body) 
    .fadeoOut(2000, 'easeInOutBounce', function() { 
     this.parentNode.removeChild(this); 
    }); 
}); 

我已经删除的元素有关的absolute和position CSS属性，他们会更好的连接到.pointer class在你的CSS样式表中。

Answer 2

这应该只是pointer.remove()，但你需要在本地范围内的每个闪耀。目前他们共享一个名为pointer的全局变量，因为您尚未将其声明为本地变量（即使用var）。

例如

$(document).mousemove(function(e) { 
    var pointer = $('<img>').attr({ 
     'src':'images/sparkle.png' 
    }); 

    $('body').append(pointer); 

    pointer.attr('class','pointer').css({ 
     position:'absolute', 
     top: e.pageY +2 , 
     left: e.pageX +2 

    }).fadeOut(2000,'easeInOutBounce',function(){ 
     //something here to remover 
     pointer.remove(); 
    }); 
});