JavaScript同时运行具有多个元素的相同功能

Question

I have a JavaScript function that looks like this:

function buttonClick()
{
    var numberPop = Math.floor((Math.random()*1000)+1);
    $( "#number-add-" + numberPop ).fadeOut(2000);
}

I have the ability to click a button that runs this function multiple times. However, sometimes, I click it before the previous element that it affected faded out. Because of that, the fading of the previous element stops in the middle.

How can I make it so that this function can CONTINUE fading the previously affected elements WHILE fading the current element as well? This way, multiple elements can be fading at the same time.

Edit:

This is the entire code:

function buttonClick(subEvent)
{
    var numberPop = Math.floor((Math.random()*1000)+1);
    var mainEvent = subEvent ? subEvent : window.event;
    var div = document.getElementById('number');
    div.innerHTML = div.innerHTML + '<div class="number-pop" id="number-add-'+ numberPop +'" style="z-index:99; position:absolute;margin-top:'+ (mainEvent.screenY - 98) +'px;margin-left:'+ (mainEvent.screenX - 12) +'px;">'+ '+1' +'</div>';
    $( "#number-add-" + numberPop ).stop(true, false).animate({top: "+=-200", opacity:'0'}, 3000, 'linear');
}

Answer 1

It's hard to tell how to fix it without all of your code (HTML + JS) -- we can't see what the element with id "number" is. That said, it looks like you're just trying to append new HTML. So, replace this:

var div = document.getElementById('number');
div.innerHTML = div.innerHTML + '<div class="number-pop" id="number-add-'+ numberPop +'" style="z-index:99; position:absolute;margin-top:'+ (mainEvent.screenY - 98) +'px;margin-left:'+ (mainEvent.screenX - 12) +'px;">'+ '+1' +'</div>';

with this:

$('#number').append('<div class="number-pop" id="number-add-'+ numberPop +'" style="z-index:99; position:absolute;margin-top:'+ (mainEvent.screenY - 98) +'px;margin-left:'+ (mainEvent.screenX - 12) +'px;">'+ '+1' +'</div>');

That will add the new HTML without resetting existing elements.