javascript - 使用 jQuery setInterval 添加和删除类

Question

我只想展示我的形象，就像挥舞着的火焰。所以我想使用两种形式的层(火焰舌)并将相同的位置堆叠在同一个地方(一个在另一个后面)。然后我试图隐藏第二个火焰舌头并显示第一个火焰舌头。然后隐藏第二个火焰舌头并像​​那样显示第一个。 (一个隐藏，另一个展示)

我尝试使用 jquery setInterval 但我遇到的问题很少。有时它会在屏幕上同时显示两个火焰。这很奇怪。看看我的代码。

<div class="wrapper">
  <div class="flame-1 flames-one">
    <img src="https://i.imgur.com/0Pfsrdh.png" alt="">
  </div>
  <div class="flame-2 flames-two">
    <img src="https://i.imgur.com/EypytyC.png" alt="">
  </div>
<div class="wrapper-img">
   <img src="https://i.imgur.com/moNtPwG.png" class="wrap-img" alt="">
</div>
</div>

.wrapper{
  text-align: center;
  position:relative;
}

.flame-1,
.flame-2,
.wrapper-img,
.show-1,
.show-2{
   position: absolute;
}
/* .flame-1,
.flame-2{
  top:30px;
  display:none;
} */


.flame-1{
 left: 38px;
 top: 32px;

}

.flames-one,
.flames-two{
   display:none;
}

.flame-2{
  left: 67px;
  top: 40px;
}

.flame-2 img{
  width: 190px;
}

.wrapper-img{
   top:220px;
}

.show-1,
.show-2{
  display:block;
}

var $flameOne = $(".flames-one");
setInterval(function(){
    $flameOne.toggleClass("show-1");
}, 300);


var $flameTwo = $(".flames-two");
setInterval(function(){
    $flameTwo.toggleClass("show-1");
}, 500)

有什么解决办法吗？

Jsfiddle

Answer 1

Sometimes it shows two flames at once in screen

那是因为你为两个类设置了不同的时间间隔:

var $flameOne = $(".flames-one");
setInterval(function(){
    $flameOne.toggleClass("show-1");
}, 300);                           // <-- This


var $flameTwo = $(".flames-two");
setInterval(function(){
    $flameTwo.toggleClass("show-1");
}, 500);                            // <-- And this

使它们相等应该可以解决问题。

更进一步，您可以在同一个函数中执行这两个操作:

var $flameOne = $(".flames-one");
var $flameTwo = $(".flames-two");
$flameOne.toggleClass("show-1");        // This is to keep one of the flames hidden initially.
setInterval(function(){
    $flameOne.toggleClass("show-1");
    $flameTwo.toggleClass("show-1");
}, 300);

fiddle :https://jsfiddle.net/uy43w5qq/2/