刪除元素後淡出

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