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

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

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

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

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

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

将flameTwo放入setTimeout()函数中。因为最初火焰2仅在火焰1完成后才开始。这是我的代码

var $flameTwo = $(".flames-two");
setTimeout(function() {
 setInterval(function(){
    $flameTwo.toggleClass("show-2");
    }, 300)
}, 300)

使用jQuery setInterval添加和删除类

4 个答案: