淡出后删除元素

Question

I have some code that does a 90's style mouse trail by appending an image at the cursor coordinates and then fading out. At the moment it keeps the appended image on the page but I want to remove it after it has faded out any clues on what to populate in the callback after fadeOut

Of the few options I have tried it seemed to not show the trail as it was removing too early or by removing all of the

(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

In the fadeOut complete callback function you can just put this:

$(this).remove();

or more optimally, avoiding the jQuery call:

this.parentNode.removeChild(this);

Also, don't forget the var specifier on the declaration of pointer , that being the original cause of your problem, because you only had one global pointer variable.

That said, it's perfectly possible to write this function without any temporary variables:

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

I've removed the absolute and position CSS attributes on the element, they'd be better off attached to the .pointer class in your CSS style sheet.

Answer 2

It should just be pointer.remove() , but you need to locally scope each sparkle. At the moment they share a single global var called pointer as you have not declared it local (ie with var ).

eg

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