使用jQuery setInterval添加和删除类

Question

我只想展示我的形象就像挥动的火焰。因此，我想使用两种形式的层(火焰舌)和堆叠在同一个地方(在另一个后面)相同的位置。然后，我试图隐藏第二个火焰舌和显示第一个火焰舌头。然后隐藏第二个火焰舌，并显示第一个这样。(一个躲藏，另一个表演)

我试过使用，但遇到的问题不多。有时它在屏幕上同时显示两个火焰。这太奇怪了。看看我的密码。

<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

有时它会同时在屏幕上显示两个火焰。

这是因为您为这两个类设置了不同的间隔：

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

小提琴：https://jsfiddle.net/uy43w5qq/2/

Answer 2

这个问题的一个更简单的解决方案是使用单个间隔在容器上切换一个类，然后根据该类隐藏/显示相关的图像。试试这个：

​

var $wrapper = $('.wrapper');
setInterval(function() {
  $wrapper.toggleClass("alt");
}, 300);

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

.flames,
.wrapper-img,
.show-1,
.show-2 {
  position: absolute;
}

.flames {
  display: none;
}

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

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

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

.wrapper-img {
  top: 220px;
}

.wrapper .flame-1 { display: block; }
.wrapper .flame-2 { display: none; }
.wrapper.alt .flame-1 { display: none; }
.wrapper.alt .flame-2 { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="flame-1 flames">
    <img src="https://i.imgur.com/0Pfsrdh.png" alt="">
  </div>

  <div class="flame-2 flames">
    <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>

​

Answer 3

使用一个setInterval并保持火焰的当前状态。例如，如果您当前的状态是火焰一，那么移动到火焰二。