Question

我有一个看起来像这样的JavaScript函数：

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

我可以多次单击运行此功能的按钮。但是，有时候，我会在它影响淡出的前一个元素之前单击它。因此，前一个元素的淡化在中间停止。

我怎样才能使这个函数继续淡化以前受影响的元素？同时淡化当前元素？这样，多个元素可以同时淡出。

修改

这是整个代码：

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

如果没有所有代码（HTML + JS），很难说如何修复它 - 我们无法看到id为“number”的元素是什么。也就是说，看起来你只是想添加新的HTML。所以，替换这个：

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').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>');

这将添加新的HTML而不重置现有元素。

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

1 个答案: