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变量。

也就是说，完全可以在没有任何临时变量的情况下编写此函数：

$(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属性，最好将它们附加到CSS样式表中的.pointer类。

Answer 2

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

e.g。

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

淡出后删除元素

2 个答案: