使用CSS和Javascript实现辐射圆效果

我正在尝试使用CSS和Javascript创建一个辐射圆效果。我的想法是每隔一段时间创建一个新的圆圈副本，然后在几秒钟后将其删除

它在几秒钟内运行良好，但随后这些圆圈似乎被移除得太快了，因为它们的辐射时间不会超过一刻

发生了什么事？有没有更好的方法来实现我在前几秒钟得到的效果

CSS Javascript

计数器=0；
函数createCircle（）{
//圆ID
var circleID=“圆圈”+计数器；
//将圆圈添加到文档中
$（“正文”）。追加（“”）；
$thisCircle=$（“#”+circleID）；
//添加“缩放”类
setTimeout（函数（）{
$thisCircle.addClass（“缩放”）；
},10);
//去掉圆圈
setTimeout（函数（）{
$thisCircle.remove（）；
},3000);
计数器++；
}
setInterval（函数（）{
createCircle（）；
},500);

---

jsiddle Demo：

您忘记将

$thiscirle

变量设置为闭包范围的局部变量，它是一个隐式全局变量。3秒钟后，它将开始删除当前圆圈（已设置动画500毫秒）。圆圈0到4将保留在DOM中，不透明度为

0

要解决此问题，只需添加另一个：

（）

---

顺便说一句，您可以省略

计数器

变量，直接引用刚刚创建的元素：

setInterval(function createCircle() {
    var $thisCircle = $("<div class='circle'></div>").appendTo("body");
    // add "zoom" class with minimal delay so the transition starts
    setTimeout(function () {
        $thisCircle.addClass("zoom");
    }, 0);

    // Remove circle
    setTimeout(function () {
        $thisCircle.remove();
    }, 3000);
}, 500);

setInterval（函数createCircle（）{
变量$thisCircle=$（“”）。附加到（“正文”）；
//以最小的延迟添加“zoom”类，以便开始转换
setTimeout（函数（）{
$thisCircle.addClass（“缩放”）；
}, 0);
//去掉圆圈
setTimeout（函数（）{
$thisCircle.remove（）；
}, 3000);
}, 500);

（）

这里有一个更好的解决方案。 CSS为您提供了选择器，允许您完全删除计数器

可以附加圆，而无需为其指定ID

$("body").append("<div class='circle'></div>");

当该删除圆圈时，您正在删除最旧的圆圈，它将是队列中的第一个圆圈

$(".circle:first-child").remove();

---

你需要什么浏览器支持Chrome、Firefox、Safari、IE 10+。看起来它与删除圆圈功能有关。如果你将settimeout从3000改为30000，在更长的时间内看起来会更好。哦，是的，这一定是问题所在。工作3秒，超时3000毫秒。但我试图只针对刚创建用于删除的元素，而不是所有元素。这就是为什么我要增加该计数器变量-以创建唯一ID并仅删除该圆圈元素。完美！非常感谢。@PortlandRunner:我不明白。如果你不删除这些圆圈，而是每半秒钟添加一次，它们就会堆积在DOM中——不可见，但分配内存？这就是我所说的泄密…@Bergi-当我意识到这是多么愚蠢时，我删除了我的评论。。。谢谢你的帮助，我正在添加ID，这样我就可以在三秒钟后将其删除，并且只能将其作为目标。如果AppEnter（）允许回调，这是不必要的，但我不这么认为。但是，如果没有最后ID和第一个子选择器，就可以对它进行定位。

setInterval(function createCircle() {
    var $thisCircle = $("<div class='circle'></div>").appendTo("body");
    // add "zoom" class with minimal delay so the transition starts
    setTimeout(function () {
        $thisCircle.addClass("zoom");
    }, 0);

    // Remove circle
    setTimeout(function () {
        $thisCircle.remove();
    }, 3000);
}, 500);

$("body").append("<div class='circle'></div>");

$(".circle:last-child").addClass("zoom");

$(".circle:first-child").remove();